add legend enabled attribute, fix tooltip text

DataBiosphere · Sep 27, 2024 · 0e7647e · 0e7647e
1 parent 2abd209
commit 0e7647e
Showing 1 changed file with 31 additions and 28 deletions.
diff --git a/src/dataset-builder/CohortEditor.ts b/src/dataset-builder/CohortEditor.ts
@@ -596,6 +596,8 @@ interface CohortDemographics {
   title: string;
   yTitle: string;
   height: string;
+  legendEnabled: boolean;
+  showSeriesName: boolean;
 }
 
 export const CohortEditor: React.FC<CohortEditorProps> = (props) => {
@@ -617,10 +619,12 @@ export const CohortEditor: React.FC<CohortEditorProps> = (props) => {
       { short: 'Male' },
       { short: 'Other', long: 'Nonbinary, 2 Spirit, Genderqueer, etc.' },
     ],
-    series: [{ data: [40, 50, 30] }],
+    series: [{ name: 'Overall', data: [40, 50, 30] }],
     title: 'Gender identity',
     yTitle: 'AVERAGE AGE',
     height: '250rem',
+    legendEnabled: false,
+    showSeriesName: false,
   });
   const [cohortDemographics2] = useState<CohortDemographics>({
     categories: [
@@ -633,9 +637,9 @@ export const CohortEditor: React.FC<CohortEditorProps> = (props) => {
       { short: 'Male 45-64' },
       { short: 'Male 65+' },
       { short: 'Other', long: 'Nonbinary, 2 Spirit, Genderqueer, etc.' },
-      { short: 'Other 18-44', long: 'Nonbinary, 2 Spirit, Genderqueer, etc.' },
-      { short: 'Other 45-64', long: 'Nonbinary, 2 Spirit, Genderqueer, etc.' },
-      { short: 'Other 65+', long: 'Nonbinary, 2 Spirit, Genderqueer, etc.' },
+      { short: 'Other 18-44', long: 'Nonbinary, 2 Spirit, Genderqueer, etc. 18-44' },
+      { short: 'Other 45-64', long: 'Nonbinary, 2 Spirit, Genderqueer, etc. 45-64' },
+      { short: 'Other 65+', long: 'Nonbinary, 2 Spirit, Genderqueer, etc. 65+' },
     ],
     series: [
       { name: 'Asian', data: [9, 3, 3, 3, 9, 5, 3, 1, 2, 1, 1, 1] },
@@ -647,6 +651,8 @@ export const CohortEditor: React.FC<CohortEditorProps> = (props) => {
     title: 'Gender identity, current age, race',
     yTitle: 'OVERALL PERCENTAGE',
     height: '500rem',
+    legendEnabled: true,
+    showSeriesName: true,
   });
 
   const chartOptions: any = (cohortDemographics: CohortDemographics) => {
@@ -658,7 +664,7 @@ export const CohortEditor: React.FC<CohortEditorProps> = (props) => {
         style: { fontFamily: 'inherit' },
         type: 'bar',
       },
-      // legend: { reversed: true },
+      legend: { enabled: cohortDemographics.legendEnabled },
       plotOptions: { series: { stacking: 'normal' } },
       series: cohortDemographics.series,
       title: {
@@ -668,21 +674,20 @@ export const CohortEditor: React.FC<CohortEditorProps> = (props) => {
       },
       tooltip: {
         followPointer: true,
-        shared: true,
-        headerFormat: '{point.key}',
-        // pointFormatter() {
-        //   // @ts-ignore
-        //   // eslint-disable-next-line react/no-this-in-sfc
-        //   return `<br/><span style="color:${this.color}">\u25CF</span> ${
-        //     // @ts-ignore
-        //     // eslint-disable-next-line react/no-this-in-sfc
-        //     this.series.name
-        //   }: ${
-        //     // @ts-ignore
-        //     // eslint-disable-next-line react/no-this-in-sfc
-        //     costPerWorkspace.costFormatter.format(this.y)
-        //   }`;
-        // },
+        formatter() {
+          // @ts-ignore
+          // eslint-disable-next-line react/no-this-in-sfc
+          const currCategory = _.find((category) => category.short === this.x, cohortDemographics.categories);
+          const categoryDescription = currCategory.long || currCategory.short;
+          if (cohortDemographics.showSeriesName) {
+            // @ts-ignore
+            // eslint-disable-next-line react/no-this-in-sfc
+            return `${categoryDescription} <br/><span style="color:${this.color}">\u25CF</span> ${this.series.name}<br/> ${this.y}`;
+          }
+          // @ts-ignore
+          // eslint-disable-next-line react/no-this-in-sfc
+          return `${categoryDescription} <br/> ${this.y}`;
+        },
       },
       xAxis: {
         categories: _.map('short', cohortDemographics.categories),
@@ -696,14 +701,12 @@ export const CohortEditor: React.FC<CohortEditorProps> = (props) => {
         width: '96%',
       },
       accessibility: {
-        // point: {
-        //   descriptionFormatter: (point) => {
-        //     // @ts-ignore
-        //     return `${point.index + 1}. Workspace ${point.category}, ${
-        //       point.series.name
-        //     }: ${costPerWorkspace.costFormatter.format(point.y)}.`;
-        //   },
-        // },
+        point: {
+          descriptionFormatter: (point) => {
+            // @ts-ignore
+            return `${point.index + 1}. Category ${point.category}, ${point.series.name}: ${point.y}.`;
+          },
+        },
       },
       exporting: { buttons: { contextButton: { x: -15 } } },
     };