chartTheme fix

actualbudget · Sep 13, 2023 · 40ab0f2 · 40ab0f2
1 parent e7218f6
commit 40ab0f2
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 13 deletions.
diff --git a/packages/desktop-client/src/components/reports/Overview.js b/packages/desktop-client/src/components/reports/Overview.js
@@ -16,7 +16,7 @@ import View from '../common/View';
 import PrivacyFilter from '../PrivacyFilter';
 
 import Change from './Change';
-import chartTheme from './chart-theme';
+import { chartTheme } from './chart-theme';
 import Container from './Container';
 import DateRange from './DateRange';
 import { simpleCashFlow } from './graphs/cash-flow-spreadsheet';
@@ -195,7 +195,7 @@ function CashFlowCard() {
                 colorScale={[chartTheme.colors.blue, chartTheme.colors.red]}
                 width={100}
                 height={height}
-                theme={theme}
+                theme={chartTheme}
                 domain={{
                   x: [0, 100],
                   y: [0, Math.max(income, expense, 100)],

diff --git a/packages/desktop-client/src/components/reports/chart-theme.js b/packages/desktop-client/src/components/reports/chart-theme.js
@@ -41,7 +41,7 @@ const axisBaseStyles = {
   tickLabels: baseLabelStyles,
 };
 
-const chartTheme = {
+export const chartTheme = {
   colors: {
     ...colorFades,
     red: theme.reportsRed,
@@ -111,4 +111,3 @@ const chartTheme = {
     },
   },
 };
-export default chartTheme;
diff --git a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
@@ -11,7 +11,7 @@ import {
 } from 'victory';
 
 import { theme } from '../../../style';
-import chartTheme from '../chart-theme';
+import { chartTheme } from '../chart-theme';
 import Container from '../Container';
 import Tooltip from '../Tooltip';
 

diff --git a/packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx b/packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx
@@ -3,7 +3,7 @@ import type { CSSProperties } from 'react';
 import * as d from 'date-fns';
 import { VictoryAxis, VictoryBar, VictoryChart, VictoryStack } from 'victory';
 
-import theme from '../chart-theme';
+import { chartTheme } from '../chart-theme';
 import Container from '../Container';
 import Tooltip from '../Tooltip';
 
@@ -38,7 +38,7 @@ function CategorySpendingGraph({
       {(width, height, portalHost) => (
         <VictoryChart
           scale={{ x: 'time', y: 'linear' }}
-          theme={theme}
+          theme={chartTheme}
           width={width}
           height={height}
         >

diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
@@ -11,7 +11,7 @@ import {
 } from 'victory';
 
 import { type CSSProperties } from '../../../style';
-import chartTheme from '../chart-theme';
+import { chartTheme } from '../chart-theme';
 import Container from '../Container';
 import Tooltip from '../Tooltip';
 

diff --git a/packages/desktop-client/src/components/reports/graphs/common.tsx b/packages/desktop-client/src/components/reports/graphs/common.tsx
@@ -1,6 +1,6 @@
 import * as d from 'date-fns';
 
-import theme from '../chart-theme';
+import { chartTheme } from '../chart-theme';
 
 type AreaProps = {
   start: string;
@@ -47,8 +47,8 @@ export function Area({ start, end, scale, range }: AreaProps) {
           x2={0}
           y2={zero}
         >
-          <stop offset="0%" stopColor={theme.colors.blueFadeStart} />
-          <stop offset="100%" stopColor={theme.colors.blueFadeEnd} />
+          <stop offset="0%" stopColor={chartTheme.colors.blueFadeStart} />
+          <stop offset="100%" stopColor={chartTheme.colors.blueFadeEnd} />
         </linearGradient>
         <linearGradient
           id="negative-gradient"
@@ -58,8 +58,8 @@ export function Area({ start, end, scale, range }: AreaProps) {
           x2={0}
           y2={range.y[0]}
         >
-          <stop offset="0%" stopColor={theme.colors.redFadeEnd} />
-          <stop offset="100%" stopColor={theme.colors.redFadeStart} />
+          <stop offset="0%" stopColor={chartTheme.colors.redFadeEnd} />
+          <stop offset="100%" stopColor={chartTheme.colors.redFadeStart} />
         </linearGradient>
       </defs>
     </svg>