First step nivo theme

Author: BennuFire

src/chart/Utils.ts

@@ -1,5 +1,5 @@
 import { QueryResult, Record as Neo4jRecord } from 'neo4j-driver';
-
+import { tokens } from '@neo4j-ndl/base';
 export function recordToNative(input: any): any {
   if (!input && input !== false) {
     return null;
@@ -116,3 +116,10 @@ export enum EntityType {
   Node,
   Relationship,
 }
+
+export const themeNivo = {
+  text: { fill: 'inherit' },
+  axis: {
+    ticks: { text: { fill: 'rgb(var(--palette-neutral-text-weak))' } },
+  },
+};

src/chart/bar/BarChart.tsx

@@ -6,6 +6,7 @@ import { extensionEnabled } from '../../extensions/ExtensionUtils';
 import { evaluateRulesOnDict, useStyleRules } from '../../extensions/styling/StyleRuleEvaluator';
 import { ChartProps } from '../Chart';
 import { convertRecordObjectToString, recordToNative } from '../ChartUtils';
+import { themeNivo } from '../Utils';
 
 /**
  * Embeds a BarReport (from Nivo) into NeoDash.
@@ -210,6 +211,7 @@ const NeoBarChart = (props: ChartProps) => {
   const BarChartComponent = data.length > 30 ? ResponsiveBarCanvas : ResponsiveBar;
   const chart = (
     <BarChartComponent
+      theme={themeNivo}
       data={data}
       key={`${selection.index}___${selection.value}`}
       layout={layout}

src/chart/line/LineChart.tsx

@@ -11,6 +11,7 @@ import {
   toNumber,
 } from '../ChartUtils';
 import { extensionEnabled } from '../../extensions/ExtensionUtils';
+import { themeNivo } from '../Utils';
 
 interface LineChartData {
   id: string;
@@ -192,6 +193,7 @@ const NeoLineChart = (props: ChartProps) => {
   const lineViz = (
     <div className='n-h-full n-w-full overflow-hidden'>
       <ResponsiveLine
+        theme={themeNivo}
         data={data}
         xScale={
           isTimeChart

src/chart/pie/PieChart.tsx

@@ -6,6 +6,7 @@ import { evaluateRulesOnDict, useStyleRules } from '../../extensions/styling/Sty
 import { ChartProps } from '../Chart';
 import { convertRecordObjectToString, recordToNative } from '../ChartUtils';
 import { extensionEnabled } from '../../extensions/ExtensionUtils';
+import { themeNivo } from '../Utils';
 
 /**
  * Embeds a PieChart (from Nivo) into NeoDash.
@@ -132,6 +133,7 @@ const NeoPieChart = (props: ChartProps) => {
 
   return (
     <ResponsivePie
+      theme={themeNivo}
       data={data}
       sortByValue={sortByValue}
       enableArcLabels={enableArcLabels}

src/chart/scatter/ScatterPlotChart.tsx

@@ -5,6 +5,7 @@ import { recordToNative } from '../ChartUtils';
 import { ResponsiveScatterPlot, ResponsiveScatterPlotCanvas } from '@nivo/scatterplot';
 import { animated } from '@react-spring/web';
 import chroma from 'chroma-js';
+import { themeNivo } from '../Utils';
 
 /**
  * Embeds a Nivo ResponsiveScatterPlot and a ResponsiveScatterPlotCanvas into NeoDash.
@@ -281,6 +282,7 @@ const NeoScatterPlot = (props: ChartProps) => {
       }}
     >
       <ComponentType
+        theme={themeNivo}
         data={[data]}
         key={`${selection.value}`}
         xScale={

src/extensions/advancedcharts/chart/circlepacking/CirclePackingChart.tsx

@@ -6,6 +6,7 @@ import Refresh from '@mui/icons-material/Refresh';
 import { ChartProps } from '../../../../chart/Chart';
 import { NoDrawableDataErrorMessage } from '../../../../component/editor/CodeViewerComponent';
 import { mutateName, processHierarchyFromRecords, findObject, flatten } from '../../../../chart/ChartUtils';
+import { themeNivo } from '../../../../chart/Utils';
 
 /**
  * Embeds a CirclePackaging (from Charts) into NeoDash.
@@ -94,6 +95,7 @@ const NeoCirclePackingChart = (props: ChartProps) => {
         )}
         <ResponsiveCirclePacking
           {...commonProperties}
+          theme={themeNivo}
           id='name'
           value='loc'
           data={data}

src/extensions/advancedcharts/chart/radar/RadarChart.tsx

@@ -4,6 +4,7 @@ import { ResponsiveRadar } from '@nivo/radar';
 import { evaluateRulesOnDict, useStyleRules } from '../../../styling/StyleRuleEvaluator';
 import { NoDrawableDataErrorMessage } from '../../../../component/editor/CodeViewerComponent';
 import { extensionEnabled } from '../../../ExtensionUtils';
+import { themeNivo } from '../../../../chart/Utils';
 
 /**
  * Embeds a RadarChart (from Charts) into NeoDash.
@@ -80,6 +81,7 @@ const NeoRadarChart = (props: ChartProps) => {
   }
   return (
     <ResponsiveRadar
+      theme={themeNivo}
       data={data}
       isInteractive={interactive}
       animate={animate}

src/extensions/advancedcharts/chart/sankey/SankeyChart.tsx

@@ -7,6 +7,7 @@ import { evaluateRulesOnDict, evaluateRulesOnNode, useStyleRules } from '../../.
 import NeoCodeViewerComponent from '../../../../component/editor/CodeViewerComponent';
 import { isCyclic } from '../../Utils';
 import { extensionEnabled } from '../../../ExtensionUtils';
+import { themeNivo } from '../../../../chart/Utils';
 
 const UNWEIGHTED_SANKEY_PROPERTY = 'SANKEY_UNWEIGHTED';
 
@@ -190,6 +191,7 @@ const NeoSankeyChart = (props: ChartProps) => {
 
   return (
     <ResponsiveSankey
+      theme={themeNivo}
       data={data}
       margin={{
         top: marginTop,

src/extensions/advancedcharts/chart/sunburst/SunburstChart.tsx

@@ -11,6 +11,7 @@ import { Tooltip } from '@mui/material';
 import { Refresh } from '@mui/icons-material';
 import { ChartProps } from '../../../../chart/Chart';
 import { NoDrawableDataErrorMessage } from '../../../../component/editor/CodeViewerComponent';
+import { themeNivo } from '../../../../chart/Utils';
 /**
  * Embeds a SunburstChart (from Charts) into NeoDash.
  */
@@ -92,6 +93,7 @@ const NeoSunburstChart = (props: ChartProps) => {
         )}
         <ResponsiveSunburst
           {...commonProperties}
+          theme={themeNivo}
           id='name'
           value='loc'
           data={data}

src/extensions/advancedcharts/chart/treemap/TreeMapChart.tsx

@@ -6,6 +6,7 @@ import { Tooltip } from '@mui/material';
 import { Refresh } from '@mui/icons-material';
 import { ChartProps } from '../../../../chart/Chart';
 import { NoDrawableDataErrorMessage } from '../../../../component/editor/CodeViewerComponent';
+import { themeNivo } from '../../../../chart/Utils';
 
 /**
  * Embeds a TreeMap (from Charts) into NeoDash.
@@ -94,6 +95,7 @@ const NeoTreeMapChart = (props: ChartProps) => {
         )}
         <ResponsiveTreeMap
           {...commonProperties}
+          theme={themeNivo}
           identity='name'
           value='loc'
           data={data}