Create NMR dashboard

[wadjih-bencheikh18]

closes : https://github.com/zakodium-oss/react-science/issues/762

https://762-create-a-dashboard-as-a.react-science.pages.dev/stories/?path=/story/components-nmrdashboard--from-fetch

[cloudflare-workers-and-pages[bot]]

Deploying react-science with    Cloudflare Pages

Latest commit:	62984fd
Status:	✅  Deploy successful!
Preview URL:	https://34ee84b3.react-science.pages.dev
Branch Preview URL:	https://762-create-a-dashboard-as-a.react-science.pages.dev

View logs

[lpatiny]

@wadjih-bencheikh18 I just updated the stats to get lastMonth and last12Month information so I broker your code:

https://nmrdb.cheminfo.org/v1/getStats

Here are the new type definition

interface Period {
  count: number;
  count1D: number;
  count2D: number;
  count1H: number;
  count13C: number;
  count1H1H: number;
  count1H13C: number;
  countOtherNuclei: number;
}
export interface PeriodYear extends Period {
  year: number;
  firstDayOfYearEpoch: number;
}

export interface PeriodMonth extends Period {
  month: number;
  firstDayOfMonthEpoch: number;
}

export interface ValueStats {
  total: number;
  last12Months: number;
  lastMonth: number;
}
export interface Stats {
  lastUpdate: number;
  nbFiles: ValueStats;
  nbNMRs: ValueStats;
  nb1D: ValueStats;
  nb2D: ValueStats;
  nbIsFid: ValueStats;
  nbIsFt: ValueStats;
  solvents: Array<{ count: number; solvent: string }>;
  formats: Array<{ count: number; format: string }>;
  nuclei: Array<{ count: number; nucleus: string }>;
  pulseSequences: Array<{ count: number; pulseSequence: string }>;
  users: Array<{ count: number; lastModified: number; username: string }>;
  sources: Array<{ count: number; lastModified: number; source: string }>;
  perMonths: PeriodMonth[];
  perYears: PeriodYear[];
}

[wadjih-bencheikh18]

Node.js 18 test is failing because of nivo

[lpatiny]

@wadjih-bencheikh18 Thanks ! I did few text changes that I just commit.

Here are couple of comments:

• [x] As a dashboard I would like that most of the time (if screen size is big enough) we see all the information without having to sroll. If the screen is too small then it would go in a scrolling mode. So a responsive design will be needed.

• [x] Resize of window should resize all the components

• [x] Legend of the bar graph could be in the bottom of the chart

• [x] Size of the numbers (on the top, Nb of spectra) should be much bigger

The homepage of the dashboard on big screen should look a little bit like the image after but it should be centered and there should be the same white space all around the dashboard:

[lpatiny]

Node.js 18 test is failing because of nivo

This is not a problem. Anyway we will not leave this part in this repo.

[lpatiny]

For the resize it works when you enlarge the window but not shrink it. Adding a minWidth:0 should help.

[lpatiny]

@wadjih-bencheikh18 One more change in the stats format ... see below the TS definition.

And one more request.

I would like to be able to customize the displayed value. One possibility would be to have a toolbar that appears on the left when we are hover the corresponding bloc. This would give functionalities while keeping a 'neat' design.

Depending the selection the title of the chart should change.

• Last month nuclei distribution
• Last year nuclei distribution
• All time nuclei distribution

The default value should be 'Last year'

The new format includes those statistics and now the field containing the value that used to be solvent, pulse sequence, etc is always called value.

interface Period {
  count: number;
  count1D: number;
  count2D: number;
  count1H: number;
  count13C: number;
  count1H1H: number;
  count1H13C: number;
  countOtherNuclei: number;
}
export interface PeriodYear extends Period {
  year: number;
  firstDayOfYearEpoch: number;
}

export interface PeriodMonth extends Period {
  month: number;
  firstDayOfMonthEpoch: number;
}

export interface ValueStats {
  total: number;
  last12Months: number;
  lastMonth: number;
}

export interface EntryStat {
  count: number;
  lastModified: number;
  value: string;
}
export interface ArrayStats {
  total: EntryStat[];
  last12Months: EntryStat[];
  lastMonth: EntryStat[];
}
export interface Stats {
  lastUpdate: number;
  nbFiles: ValueStats;
  nbNMRs: ValueStats;
  nb1D: ValueStats;
  nb2D: ValueStats;
  nbIsFid: ValueStats;
  nbIsFt: ValueStats;
  solvents: ArrayStats;
  formats: ArrayStats;
  nuclei: ArrayStats;
  pulseSequences: ArrayStats;
  usernames: ArrayStats;
  groupNames: ArrayStats;
  sources: ArrayStats;
  perMonths: PeriodMonth[];
  perYears: PeriodYear[];
}

[targos]

It has been incorporated, thanks!