Enhance chart data labels (#2400)

Publish tno-core:1.0.7
bcgov · Feb 7, 2025 · ecdb79b · ecdb79b
1 parent 0a0612a
commit ecdb79b
Show file tree

Hide file tree

Showing 16 changed files with 388 additions and 72 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -10,6 +10,7 @@
   "cSpell.words": [
     "CBRA",
     "CHES",
+    "datalabels",
     "formik",
     "Idir",
     "insertable",
@@ -30,7 +31,6 @@
   },
   "omnisharp.enableRoslynAnalyzers": true,
   "omnisharp.enableMsBuildLoadProjectsOnDemand": true,
-  "omnisharp.organizeImportsOnFormat": true,
   "dotnet.server.useOmnisharp": true,
   "omnisharp.analyzeOpenDocumentsOnly": true,
   "files.exclude": {
@@ -43,4 +43,5 @@
     "**/node_modules": false
   },
   "dotnet.defaultSolution": "./TNO.sln",
+  "dotnet.formatting.organizeImportsOnFormat": true,
 }
diff --git a/...-core-npm-1.0.5-b50af3e4b2-fa3be7547b.zip → ...-core-npm-1.0.7-2704faafb5-634b354d7b.zip b/...-core-npm-1.0.5-b50af3e4b2-fa3be7547b.zip → ...-core-npm-1.0.7-2704faafb5-634b354d7b.zip
diff --git a/app/editor/package.json b/app/editor/package.json
@@ -60,7 +60,7 @@
     "redux-logger": "3.0.6",
     "styled-components": "6.1.11",
     "stylis": "4.3.2",
-    "tno-core": "1.0.5"
+    "tno-core": "1.0.7"
   },
   "devDependencies": {
     "@simbathesailor/use-what-changed": "2.0.0",

diff --git a/app/editor/src/features/admin/charts/components/ChartTemplatePreviewOptions.tsx b/app/editor/src/features/admin/charts/components/ChartTemplatePreviewOptions.tsx
@@ -39,6 +39,10 @@ export const ChartTemplatePreviewOptions = () => {
   const [datasetColors, setDatasetColors] = React.useState('');
   const [datasetBorderColors, setDatasetBorderColors] = React.useState('');
   const [dataLabelColors, setDataLabelColors] = React.useState('');
+  const [dataLabelBackgroundColors, setDataLabelBackgroundColors] = React.useState('');
+  const [dataLabelAnchors, setDataLabelAnchors] = React.useState('');
+  const [dataLabelAligns, setDataLabelAligns] = React.useState('');
+  const [dataLabelOffsets, setDataLabelOffsets] = React.useState('');
   const [show, setShow] = React.useState(false);
 
   return (
@@ -141,10 +145,7 @@ export const ChartTemplatePreviewOptions = () => {
                 placeholder="green,gold,red"
                 value={datasetColors}
                 onChange={(e) => {
-                  const colors = e.target.value
-                    .split(',')
-                    .map((v) => v.trim())
-                    .filter((v) => v);
+                  const colors = e.target.value.split(',').map((v) => v.trim());
                   setDatasetColors(e.target.value);
                   setChartRequestForm({
                     ...chartRequestForm,
@@ -164,10 +165,7 @@ export const ChartTemplatePreviewOptions = () => {
                 placeholder="white"
                 value={datasetBorderColors}
                 onChange={(e) => {
-                  const colors = e.target.value
-                    .split(',')
-                    .map((v) => v.trim())
-                    .filter((v) => v);
+                  const colors = e.target.value.split(',').map((v) => v.trim());
                   setDatasetBorderColors(e.target.value);
                   setChartRequestForm({
                     ...chartRequestForm,
@@ -389,7 +387,7 @@ export const ChartTemplatePreviewOptions = () => {
               />
               <Text
                 name="dataLabelColors"
-                label="Data Label Colours"
+                label="Colours"
                 placeholder="white,black"
                 value={dataLabelColors}
                 disabled={!chartRequestForm.settings.showDataLabels}
@@ -411,6 +409,95 @@ export const ChartTemplatePreviewOptions = () => {
                   });
                 }}
               />
+              <Text
+                name="dataLabelBackgroundColors"
+                label="Background Colours"
+                placeholder="white"
+                value={dataLabelBackgroundColors}
+                disabled={!chartRequestForm.settings.showDataLabels}
+                onChange={(e) => {
+                  const colors = e.target.value
+                    .split(',')
+                    .map((v) => v.trim())
+                    .filter((v) => v);
+                  setDataLabelBackgroundColors(e.target.value);
+                  setChartRequestForm({
+                    ...chartRequestForm,
+                    settings: mergeChartSettings(
+                      values.settings.options,
+                      chartRequestForm.settings,
+                      {
+                        dataLabelBackgroundColors: colors,
+                      },
+                    ),
+                  });
+                }}
+              />
+              <Text
+                name="dataLabelAnchors"
+                label="Anchors"
+                placeholder="center, start, end"
+                value={dataLabelAnchors}
+                disabled={!chartRequestForm.settings.showDataLabels}
+                onChange={(e) => {
+                  const anchors = e.target.value.split(',').map((v) => v.trim() as any);
+                  setDataLabelAnchors(e.target.value);
+                  setChartRequestForm({
+                    ...chartRequestForm,
+                    settings: mergeChartSettings(
+                      values.settings.options,
+                      chartRequestForm.settings,
+                      {
+                        dataLabelAnchors: anchors,
+                      },
+                    ),
+                  });
+                }}
+              />
+              <Text
+                name="dataLabelAligns"
+                label="Alignments"
+                placeholder="center, start, end, right, bottom, left, top"
+                value={dataLabelAligns}
+                disabled={!chartRequestForm.settings.showDataLabels}
+                onChange={(e) => {
+                  const anchors = e.target.value.split(',').map((v) => v.trim() as any);
+                  setDataLabelAligns(e.target.value);
+                  setChartRequestForm({
+                    ...chartRequestForm,
+                    settings: mergeChartSettings(
+                      values.settings.options,
+                      chartRequestForm.settings,
+                      {
+                        dataLabelAligns: anchors,
+                      },
+                    ),
+                  });
+                }}
+              />
+              <Text
+                name="dataLabelOffsets"
+                label="Offsets"
+                value={dataLabelOffsets}
+                disabled={!chartRequestForm.settings.showDataLabels}
+                onChange={(e) => {
+                  const offsets = e.target.value
+                    .split(',')
+                    .filter((v) => v.length > 0)
+                    .map((v) => parseInt(v.trim()) || 0);
+                  setDataLabelOffsets(e.target.value);
+                  setChartRequestForm({
+                    ...chartRequestForm,
+                    settings: mergeChartSettings(
+                      values.settings.options,
+                      chartRequestForm.settings,
+                      {
+                        dataLabelOffsets: offsets,
+                      },
+                    ),
+                  });
+                }}
+              />
             </Col>
           </Col>
           <Col>

diff --git a/app/editor/src/features/admin/reports/components/ReportSectionMediaAnalyticsChart.tsx b/app/editor/src/features/admin/reports/components/ReportSectionMediaAnalyticsChart.tsx
@@ -47,6 +47,18 @@ export const ReportSectionMediaAnalyticsChart = ({
   const [dataLabelColors, setDataLabelColors] = React.useState(
     chart.sectionSettings.dataLabelColors?.join(',') ?? '',
   );
+  const [dataLabelBackgroundColors, setDataLabelBackgroundColors] = React.useState(
+    chart.sectionSettings.dataLabelBackgroundColors?.join(',') ?? '',
+  );
+  const [dataLabelAnchors, setDataLabelAnchors] = React.useState(
+    chart.sectionSettings.dataLabelAnchors?.join(',') ?? 'center',
+  );
+  const [dataLabelAligns, setDataLabelAligns] = React.useState(
+    chart.sectionSettings.dataLabelAligns?.join(',') ?? 'center',
+  );
+  const [dataLabelOffsets, setDataLabelOffsets] = React.useState(
+    chart.sectionSettings.dataLabelAligns?.join(',') ?? '',
+  );
   const [datasetAvailableOptions] = React.useState(
     datasetOptions.filter((o) => chart.settings.dataset.includes(o.value)),
   );
@@ -486,15 +498,12 @@ export const ReportSectionMediaAnalyticsChart = ({
                 />
                 <Text
                   name={`sections.${sectionIndex}.chartTemplates.${chartIndex}.sectionSettings.dataLabelColors`}
-                  label="Data Label Colours"
+                  label="Colours"
                   placeholder="white,black"
                   value={dataLabelColors}
                   disabled={!chart.sectionSettings.showDataLabels}
                   onChange={(e) => {
-                    const colors = e.target.value
-                      .split(',')
-                      .map((v) => v.trim())
-                      .filter((v) => v);
+                    const colors = e.target.value.split(',').map((v) => v.trim());
                     setDataLabelColors(e.target.value);
                     setFieldValue(
                       `sections.${sectionIndex}.chartTemplates.${chartIndex}.sectionSettings`,
@@ -504,6 +513,76 @@ export const ReportSectionMediaAnalyticsChart = ({
                     );
                   }}
                 />
+                <Text
+                  name={`sections.${sectionIndex}.chartTemplates.${chartIndex}.sectionSettings.dataLabelBackgroundColors`}
+                  label="Background Colours"
+                  placeholder="lightgrey"
+                  value={dataLabelBackgroundColors}
+                  disabled={!chart.sectionSettings.showDataLabels}
+                  onChange={(e) => {
+                    const colors = e.target.value.split(',').map((v) => v.trim());
+                    setDataLabelBackgroundColors(e.target.value);
+                    setFieldValue(
+                      `sections.${sectionIndex}.chartTemplates.${chartIndex}.sectionSettings`,
+                      mergeChartSettings(chart.settings.options, chart.sectionSettings, {
+                        dataLabelBackgroundColors: colors,
+                      }),
+                    );
+                  }}
+                />
+                <Text
+                  name={`sections.${sectionIndex}.chartTemplates.${chartIndex}.sectionSettings.dataLabelAnchors`}
+                  label="Anchor(s)"
+                  placeholder="center, start, end"
+                  value={dataLabelAnchors}
+                  disabled={!chart.sectionSettings.showDataLabels}
+                  onChange={(e) => {
+                    const values = e.target.value.split(',').map((v) => v.trim() as any);
+                    setDataLabelAnchors(e.target.value);
+                    setFieldValue(
+                      `sections.${sectionIndex}.chartTemplates.${chartIndex}.sectionSettings`,
+                      mergeChartSettings(chart.settings.options, chart.sectionSettings, {
+                        dataLabelAnchors: values,
+                      }),
+                    );
+                  }}
+                />
+                <Text
+                  name={`sections.${sectionIndex}.chartTemplates.${chartIndex}.sectionSettings.dataLabelAligns`}
+                  label="Alignment(s)"
+                  placeholder="center, start, end, right, bottom, left, top"
+                  value={dataLabelAligns}
+                  disabled={!chart.sectionSettings.showDataLabels}
+                  onChange={(e) => {
+                    const values = e.target.value.split(',').map((v) => v.trim() as any);
+                    setDataLabelAligns(e.target.value);
+                    setFieldValue(
+                      `sections.${sectionIndex}.chartTemplates.${chartIndex}.sectionSettings`,
+                      mergeChartSettings(chart.settings.options, chart.sectionSettings, {
+                        dataLabelAligns: values,
+                      }),
+                    );
+                  }}
+                />
+                <Text
+                  name={`sections.${sectionIndex}.chartTemplates.${chartIndex}.sectionSettings.dataLabelOffsets`}
+                  label="Offset(s)"
+                  value={dataLabelOffsets}
+                  disabled={!chart.sectionSettings.showDataLabels}
+                  onChange={(e) => {
+                    const values = e.target.value
+                      .split(',')
+                      .filter((v) => v.length > 0)
+                      .map((v) => parseInt(v.trim()) || 0);
+                    setDataLabelOffsets(e.target.value);
+                    setFieldValue(
+                      `sections.${sectionIndex}.chartTemplates.${chartIndex}.sectionSettings`,
+                      mergeChartSettings(chart.settings.options, chart.sectionSettings, {
+                        dataLabelOffsets: values,
+                      }),
+                    );
+                  }}
+                />
               </Col>
             </Col>
           </Col>

diff --git a/app/editor/yarn.lock b/app/editor/yarn.lock
@@ -11009,7 +11009,7 @@ __metadata:
     sass-extract-loader: 1.1.0
     styled-components: 6.1.11
     stylis: 4.3.2
-    tno-core: 1.0.5
+    tno-core: 1.0.7
     typescript: 4.9.5
   languageName: unknown
   linkType: soft
@@ -15184,9 +15184,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tno-core@npm:1.0.5":
-  version: 1.0.5
-  resolution: "tno-core@npm:1.0.5"
+"tno-core@npm:1.0.7":
+  version: 1.0.7
+  resolution: "tno-core@npm:1.0.7"
   dependencies:
     "@elastic/elasticsearch": ^8.13.1
     "@fortawesome/free-solid-svg-icons": ^6.4.2
@@ -15219,7 +15219,7 @@ __metadata:
     styled-components: ^6.1.11
     stylis: ^4.3.2
     yup: ^1.1.1
-  checksum: fa3be7547b0cc6e30caa8104991efa90df03097344e8d56c1048df0cc3ad59440901968a14aea53df7bedcf973003829c3571e615792476733f8c6fcc23771bc
+  checksum: 634b354d7b527f378052b6fc57a4cd97fc281f2ae0c3fefa663e6672eeae8c8dc7ddaa38822144d0e4d1ed84def6b4b8a6b2f078bf8c8e5c2fb7302bfdcf8e42
   languageName: node
   linkType: hard
 

diff --git a/...-core-npm-1.0.5-b50af3e4b2-fa3be7547b.zip → ...-core-npm-1.0.7-2704faafb5-634b354d7b.zip b/...-core-npm-1.0.5-b50af3e4b2-fa3be7547b.zip → ...-core-npm-1.0.7-2704faafb5-634b354d7b.zip
diff --git a/app/subscriber/package.json b/app/subscriber/package.json
@@ -45,7 +45,7 @@
     "sheetjs": "file:packages/xlsx-0.20.1.tgz",
     "styled-components": "6.1.11",
     "stylis": "4.3.2",
-    "tno-core": "1.0.5"
+    "tno-core": "1.0.7"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "6.4.5",