Fix on Nivo Canvas

Author: BennuFire

src/chart/Chart.ts

@@ -19,6 +19,7 @@ export interface ChartProps {
   updateReportSetting?: (name, value) => void; // Callback to update a setting for this report.
   fields: (fields) => string[]; // List of fields (return values) available for the report.
   setFields?: (fields) => void; // Update the list of fields for this report.
+  theme?: string; // Dashboard theme value.
 }
 
 /**

src/chart/Utils.ts

@@ -1,5 +1,5 @@
+import { tokens } from '@neo4j-ndl/base';
 import { QueryResult, Record as Neo4jRecord } from 'neo4j-driver';
-
 export function recordToNative(input: any): any {
   if (!input && input !== false) {
     return null;
@@ -118,11 +118,11 @@ export enum EntityType {
 }
 
 export const themeNivo = {
-  textColor: 'rgb(var(--palette-neutral-text-weak))',
-  text: { fill: 'rgb(var(--palette-neutral-text-weak))' },
+  textColor: 'rgb(var(--palette-neutral-text-default))',
+  text: { fill: 'rgb(var(--palette-neutral-text-default))' },
   axis: {
-    ticks: { text: { fill: 'rgb(var(--palette-neutral-text-weak))' } },
-    legend: { text: { fill: 'rgb(var(--palette-neutral-text-weak))' } },
+    ticks: { text: { fill: 'rgb(var(--palette-light-neutral-text-default))' } },
+    legend: { text: { fill: 'rgb(var(--palette-neutral-text-default))' } },
   },
   legends: {
     text: { fill: 'rgb(var(--palette-neutral-text-weak))' },
@@ -146,3 +146,38 @@ export const themeNivo = {
     },
   },
 };
+
+export const themeNivoCanvas = (theme) => {
+  let baseDefault =
+    theme === 'light' ? tokens.palette.light.neutral.text.default : tokens.palette.dark.neutral.text.default;
+  let baseWeak = theme === 'light' ? tokens.palette.light.neutral.text.weak : tokens.palette.dark.neutral.text.weak;
+  return {
+    // textColor: 'rgb(var(--palette-neutral-text-default))',
+    text: { fill: baseDefault },
+    axis: {
+      ticks: { text: { fill: baseDefault } },
+      legend: { text: { fill: baseDefault } },
+    },
+    legends: {
+      text: { fill: baseWeak },
+      title: { text: { fill: baseWeak } },
+      ticks: { text: { fill: baseWeak } },
+      hidden: { text: { fill: baseWeak } },
+    },
+    markers: {
+      text: { fill: baseDefault },
+    },
+    labels: {
+      text: { fill: baseDefault },
+    },
+    annotations: {
+      text: { fill: baseDefault },
+    },
+    tooltip: {
+      container: {
+        fill: 'rgb(var(--palette-neutral-text-default))',
+        background: 'rgb(var(--palette-neutral-bg-strong))',
+      },
+    },
+  };
+};

src/chart/bar/BarChart.tsx

@@ -5,7 +5,7 @@ import { getD3ColorsByScheme } from '../../config/ColorConfig';
 import { evaluateRulesOnDict, useStyleRules } from '../../extensions/styling/StyleRuleEvaluator';
 import { ChartProps } from '../Chart';
 import { convertRecordObjectToString, recordToNative } from '../ChartUtils';
-import { themeNivo } from '../Utils';
+import { themeNivo, themeNivoCanvas } from '../Utils';
 import { extensionEnabled } from '../../utils/ReportUtils';
 
 /**
@@ -208,10 +208,11 @@ const NeoBarChart = (props: ChartProps) => {
   };
 
   const extraProperties = positionLabel == 'off' ? {} : { barComponent: BarComponent };
-  const BarChartComponent = data.length > 30 ? ResponsiveBarCanvas : ResponsiveBar;
+  const canvas = data.length > 30;
+  const BarChartComponent = canvas ? ResponsiveBarCanvas : ResponsiveBar;
   const chart = (
     <BarChartComponent
-      theme={themeNivo}
+      theme={canvas ? themeNivoCanvas(props.theme) : themeNivo}
       data={data}
       key={`${selection.index}___${selection.value}`}
       layout={layout}

src/report/Report.tsx

@@ -19,6 +19,7 @@ import { getPageNumber } from '../settings/SettingsSelectors';
 import { getPrepopulateReportExtension } from '../extensions/state/ExtensionSelectors';
 import { deleteSessionStoragePrepopulationReportFunction } from '../extensions/state/ExtensionActions';
 import { updateFieldsThunk } from '../card/CardThunks';
+import { getDashboardTheme } from '../dashboard/DashboardSelectors';
 
 const DEFAULT_LOADING_ICON = <LoadingSpinner size='large' className='centered' style={{ marginTop: '-30px' }} />;
 
@@ -54,6 +55,7 @@ export const NeoReport = ({
   ChartType = NeoTableChart, // The report component to render with the query results.
   prepopulateExtensionName,
   deletePrepopulationReportFunction,
+  theme,
 }) => {
   const [records, setRecords] = useState(null);
   const [timer, setTimer] = useState(null);
@@ -276,6 +278,7 @@ export const NeoReport = ({
           updateReportSetting={updateReportSetting}
           fields={fields}
           setFields={setFields}
+          theme={theme}
         />
       </div>
     );
@@ -341,6 +344,7 @@ export const NeoReport = ({
 const mapStateToProps = (state, ownProps) => ({
   pagenumber: getPageNumber(state),
   prepopulateExtensionName: getPrepopulateReportExtension(state, ownProps.id),
+  theme: getDashboardTheme(state),
 });
 
 const mapDispatchToProps = (dispatch) => ({