Clean theme optimizations (#2920)

FormidableLabs · Oct 16, 2024 · 7afa44a · 7afa44a
1 parent 26778d9
commit 7afa44a
Show file tree

Hide file tree

Showing 22 changed files with 225 additions and 57 deletions.
diff --git a/.changeset/dry-books-invite.md b/.changeset/dry-books-invite.md
@@ -0,0 +1,5 @@
+---
+"victory-core": minor
+---
+
+Clean theme color updates and other minor adjustments
diff --git a/demo/ts/app.tsx b/demo/ts/app.tsx
@@ -32,6 +32,7 @@ import PrimitivesDemo from "./components/primitives-demo";
 import ScatterDemo from "./components/victory-scatter-demo";
 import SelectionDemo from "./components/selection-demo";
 import StackDemo from "./components/victory-stack-demo";
+import StackedThemeDemos from "./components/stacked-theme-demo";
 import TooltipDemo from "./components/victory-tooltip-demo";
 import VictoryDemo from "./components/victory-demo";
 import VictorySelectionContainerDemo from "./components/victory-selection-container-demo";
@@ -84,6 +85,7 @@ const MAP = {
   "/scatter": { component: ScatterDemo, name: "ScatterDemo" },
   "/selection": { component: SelectionDemo, name: "SelectionDemo" },
   "/stack": { component: StackDemo, name: "StackDemo" },
+  "/stacked-theme": { component: StackedThemeDemos, name: "StackedThemeDemos" },
   "/tooltip": { component: TooltipDemo, name: "TooltipDemo" },
   "/victory": { component: VictoryDemo, name: "VictoryDemo" },
   "/victory-selection-container": {

diff --git a/demo/ts/components/canvas-demo.tsx b/demo/ts/components/canvas-demo.tsx
@@ -13,7 +13,7 @@ import {
   CanvasGroup,
   CanvasPoint,
 } from "victory-canvas";
-import { VictoryTheme } from "victory-core/lib";
+import { VictoryTheme } from "victory-core";
 
 const populationData = [
   {

diff --git a/demo/ts/components/events-demo.tsx b/demo/ts/components/events-demo.tsx
@@ -77,7 +77,7 @@ class EventsDemo extends React.Component {
                           return {
                             style: {
                               ...props.style,
-                              fill: themeColors.pink,
+                              fill: themeColors.red,
                             },
                           };
                         },

diff --git a/demo/ts/components/group-demo.tsx b/demo/ts/components/group-demo.tsx
@@ -11,7 +11,7 @@ import { VictoryTooltip } from "victory-tooltip";
 import { VictoryVoronoi } from "victory-voronoi";
 import { VictoryBoxPlot } from "victory-box-plot";
 import { range, random } from "lodash";
-import { VictoryTheme } from "victory-core/lib";
+import { VictoryTheme } from "victory-core";
 
 const themeColors = VictoryTheme.clean.palette?.colors || {};
 class App extends React.Component {

diff --git a/demo/ts/components/horizontal-demo.tsx b/demo/ts/components/horizontal-demo.tsx
@@ -145,7 +145,7 @@ class App extends React.Component {
           <VictoryBar
             style={{
               data: {
-                fill: themeColors.pink,
+                fill: themeColors.red,
               },
             }}
             horizontal

diff --git a/demo/ts/components/immutable-demo.tsx b/demo/ts/components/immutable-demo.tsx
@@ -33,7 +33,7 @@ const themeColors = VictoryTheme.clean.palette?.colors || {};
 const scatterFillStyle: VictoryStyleInterface = {
   data: {
     fill: ({ active }) =>
-      active ? themeColors.pink || "pink" : themeColors.blue || "blue",
+      active ? themeColors.red || "pink" : themeColors.blue || "blue",
   },
 };
 interface WrapperProps {

diff --git a/demo/ts/components/primitives-demo.tsx b/demo/ts/components/primitives-demo.tsx
@@ -111,7 +111,7 @@ class App extends React.Component<any, PrimitivesDemoState> {
                   cy={0}
                   startAngle={180}
                   endAngle={360}
-                  style={{ fill: themeColors.pink }}
+                  style={{ fill: themeColors.red }}
                 />
               }
             />

diff --git a/demo/ts/components/stacked-theme-demo.tsx b/demo/ts/components/stacked-theme-demo.tsx
@@ -0,0 +1,141 @@
+import React from "react";
+import { VictoryArea } from "victory-area";
+import { VictoryBar } from "victory-bar";
+import { VictoryChart } from "victory-chart";
+import { VictoryStack } from "victory-stack";
+import {
+  ColorScalePropType,
+  VictoryTheme,
+  VictoryThemeDefinition,
+} from "victory-core";
+import { VictoryAxis } from "victory-axis";
+
+const data = [
+  {
+    x: 1,
+    y: 2,
+  },
+  {
+    x: 2,
+    y: 3,
+  },
+  {
+    x: 3,
+    y: 5,
+  },
+  {
+    x: 4,
+    y: 4,
+  },
+  {
+    x: 5,
+    y: 7,
+  },
+];
+
+const StackedChart = ({
+  theme = VictoryTheme.clean,
+  colorScale,
+  chartType = "area",
+  domainPadding,
+}: {
+  theme?: VictoryThemeDefinition;
+  colorScale?: ColorScalePropType;
+  chartType?: "area" | "bar";
+  domainPadding?: number;
+}) => {
+  const chartStyle: { [key: string]: React.CSSProperties } = {
+    parent: {
+      border: "1px solid #ccc",
+      width: "100%",
+      height: 400,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+    },
+  };
+  const ChartComponent = chartType === "area" ? VictoryArea : VictoryBar;
+  return (
+    <VictoryChart
+      theme={theme}
+      domainPadding={domainPadding}
+      style={chartStyle}
+    >
+      <VictoryAxis label="X Axis" />
+      <VictoryAxis dependentAxis label="Y Axis" />
+      <VictoryStack colorScale={colorScale} aria-label="Victory Stack Demo">
+        <ChartComponent data={data} />
+        <ChartComponent data={data} />
+        <ChartComponent data={data} />
+        <ChartComponent data={data} />
+        <ChartComponent data={data} />
+      </VictoryStack>
+    </VictoryChart>
+  );
+};
+
+const colorScales: ColorScalePropType[] = [
+  "qualitative",
+  "heatmap",
+  "warm",
+  "cool",
+  "red",
+  "green",
+];
+
+class StackedThemeDemos extends React.Component {
+  render() {
+    const containerStyle: React.CSSProperties = {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "20px",
+    };
+
+    const wrapperStyle: React.CSSProperties = {
+      ...containerStyle,
+      flexDirection: "column",
+    };
+
+    return (
+      <div className="demo" style={containerStyle}>
+        <div style={wrapperStyle}>
+          <h2>Clean Theme</h2>
+          {colorScales.map((colorScale, i) => (
+            <StackedChart key={i} colorScale={colorScale} />
+          ))}
+          {colorScales.map((colorScale, i) => (
+            <StackedChart
+              key={i}
+              colorScale={colorScale}
+              chartType="bar"
+              domainPadding={20}
+            />
+          ))}
+        </div>
+        <div style={wrapperStyle}>
+          <h2>Material Theme</h2>
+          {colorScales.map((colorScale, i) => (
+            <StackedChart
+              key={i}
+              theme={VictoryTheme.material}
+              colorScale={colorScale}
+            />
+          ))}
+          {colorScales.map((colorScale, i) => (
+            <StackedChart
+              key={i}
+              theme={VictoryTheme.material}
+              colorScale={colorScale}
+              chartType="bar"
+              domainPadding={20}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default StackedThemeDemos;
diff --git a/demo/ts/components/victory-area-demo.tsx b/demo/ts/components/victory-area-demo.tsx
@@ -133,8 +133,6 @@ export default class VictoryAreaDemo extends React.Component<
       justifyContent: "center",
     };
 
-    const dataStyle = { strokeWidth: 2, fillOpacity: 0.4 };
-
     return (
       <div className="demo" style={containerStyle}>
         <VictoryChart theme={VictoryTheme.clean} style={style}>
@@ -185,7 +183,7 @@ export default class VictoryAreaDemo extends React.Component<
             data={this.state.data}
             style={{
               data: {
-                fill: VictoryTheme.clean.palette?.colors?.pink,
+                fill: VictoryTheme.clean.palette?.colors?.red,
               },
             }}
           />

diff --git a/demo/ts/components/victory-bar-demo.tsx b/demo/ts/components/victory-bar-demo.tsx
@@ -153,7 +153,7 @@ export default class VictoryBarDemo extends React.Component<
           <VictoryBar
             theme={VictoryTheme.clean}
             style={{
-              data: { fill: VictoryTheme.clean.palette?.colors?.pink },
+              data: { fill: VictoryTheme.clean.palette?.colors?.red },
             }}
             scale={{ y: "log", x: "linear" }}
             horizontal
@@ -509,7 +509,7 @@ export default class VictoryBarDemo extends React.Component<
           style={{
             parent: parentStyle,
             data: {
-              fill: VictoryTheme.clean.palette?.colors?.pink,
+              fill: VictoryTheme.clean.palette?.colors?.red,
             },
           }}
           labels={["a", "b", "c", "d", "e"]}

diff --git a/demo/ts/components/victory-box-plot-demo.tsx b/demo/ts/components/victory-box-plot-demo.tsx
@@ -145,7 +145,7 @@ export default class VictoryBoxPlotDemo extends React.Component<
             ]}
             style={{
               q1: { fill: VictoryTheme.clean.palette?.colors?.yellow },
-              q3: { fill: VictoryTheme.clean.palette?.colors?.pink },
+              q3: { fill: VictoryTheme.clean.palette?.colors?.red },
             }}
           />
         </VictoryChart>
@@ -244,7 +244,7 @@ export default class VictoryBoxPlotDemo extends React.Component<
               median: "bottom",
             }}
             style={{
-              q1: { fill: VictoryTheme.clean.palette?.colors?.pink },
+              q1: { fill: VictoryTheme.clean.palette?.colors?.red },
               q3: { fill: VictoryTheme.clean.palette?.colors?.purple },
             }}
           />

diff --git a/demo/ts/components/victory-brush-container-demo.tsx b/demo/ts/components/victory-brush-container-demo.tsx
@@ -322,7 +322,7 @@ export default class VictoryBrushContainerDemo extends React.Component<
             <VictoryBar
               style={{
                 data: {
-                  fill: themeColors.pink,
+                  fill: themeColors.red,
                 },
               }}
               data={[

diff --git a/demo/ts/components/victory-chart-demo.tsx b/demo/ts/components/victory-chart-demo.tsx
@@ -261,7 +261,7 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
           </VictoryChart>
 
           <VictoryChart style={chartStyle} theme={VictoryTheme.clean}>
-            <VictoryScatter style={{ data: { fill: themeColors.pink } }} />
+            <VictoryScatter style={{ data: { fill: themeColors.red } }} />
           </VictoryChart>
 
           <VictoryChart
@@ -509,7 +509,7 @@ class VictoryChartDemo extends React.Component<any, VictoryChartDemoState> {
             theme={VictoryTheme.clean}
           >
             <VictoryLine
-              style={{ data: { stroke: themeColors.pink } }}
+              style={{ data: { stroke: themeColors.red } }}
               y={(data) => Math.sin(2 * Math.PI * data.x)}
             />
 

diff --git a/demo/ts/components/victory-cursor-container-demo.tsx b/demo/ts/components/victory-cursor-container-demo.tsx
@@ -178,7 +178,7 @@ class App extends React.Component<any, VictoryCursorContainerStateInterface> {
             <VictoryGroup style={chartStyle}>
               <VictoryScatter
                 style={{
-                  data: { fill: themeColors.pink },
+                  data: { fill: themeColors.red },
                 }}
                 size={({ active }) => (active ? 5 : 3)}
                 labels={({ datum }) => datum.y}

diff --git a/demo/ts/components/victory-demo.tsx b/demo/ts/components/victory-demo.tsx
@@ -10,7 +10,7 @@ import { VictoryScatter } from "victory-scatter";
 import { VictoryStack } from "victory-stack";
 import { VictoryGroup } from "victory-group";
 import { VictorySelectionContainer } from "victory-selection-container";
-import { VictoryTheme } from "victory-core/lib";
+import { VictoryTheme } from "victory-core";
 
 export default class App extends React.Component {
   render() {

diff --git a/demo/ts/components/victory-histogram-demo.tsx b/demo/ts/components/victory-histogram-demo.tsx
@@ -327,7 +327,7 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
           style={{
             parent: parentStyle,
             data: {
-              fill: VictoryTheme.clean.palette?.colors?.pink,
+              fill: VictoryTheme.clean.palette?.colors?.red,
             },
           }}
           events={[
@@ -465,7 +465,7 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
           <VictoryHistogram
             horizontal
             style={{
-              data: { fill: VictoryTheme.clean.palette?.colors?.pink },
+              data: { fill: VictoryTheme.clean.palette?.colors?.red },
             }}
             data={this.dateData}
           />

diff --git a/demo/ts/components/victory-label-demo.tsx b/demo/ts/components/victory-label-demo.tsx
@@ -160,7 +160,7 @@ export default class App extends React.Component<any, {}> {
           theme={VictoryTheme.clean}
           labelComponent={
             <VictoryLabel
-              backgroundStyle={{ fill: themeColors.pink, opacity: 0.3 }}
+              backgroundStyle={{ fill: themeColors.red, opacity: 0.3 }}
               textAnchor="start"
               verticalAnchor="end"
               text={
@@ -175,7 +175,7 @@ export default class App extends React.Component<any, {}> {
           theme={VictoryTheme.clean}
           labelComponent={
             <VictoryLabel
-              backgroundStyle={{ fill: themeColors.pink, opacity: 0.3 }}
+              backgroundStyle={{ fill: themeColors.red, opacity: 0.3 }}
               textAnchor="end"
               verticalAnchor="middle"
               text={
@@ -278,7 +278,7 @@ export default class App extends React.Component<any, {}> {
           labelComponent={
             <VictoryLabel
               backgroundStyle={[
-                { fill: themeColors.pink },
+                { fill: themeColors.red },
                 { fill: themeColors.blue },
                 { fill: themeColors.purple },
                 { fill: themeColors.red },
@@ -303,7 +303,7 @@ export default class App extends React.Component<any, {}> {
             <VictoryLabel
               angle={20}
               backgroundStyle={[
-                { fill: themeColors.pink },
+                { fill: themeColors.red },
                 { fill: themeColors.blue },
               ]}
               text={[

diff --git a/demo/ts/components/victory-line-demo.tsx b/demo/ts/components/victory-line-demo.tsx
@@ -205,7 +205,7 @@ export default class VictoryLineDemo extends React.Component<
           theme={VictoryTheme.clean}
           style={{
             parent: parentStyle,
-            data: { stroke: VictoryTheme.clean.palette?.colors?.pink },
+            data: { stroke: VictoryTheme.clean.palette?.colors?.red },
           }}
           data={this.state.arrayData}
           x={0}

diff --git a/demo/ts/components/victory-tooltip-demo.tsx b/demo/ts/components/victory-tooltip-demo.tsx
@@ -8,7 +8,7 @@ import { VictoryScatter } from "victory-scatter";
 import { VictoryTooltip } from "victory-tooltip";
 import { VictoryCandlestick } from "victory-candlestick";
 import { VictoryErrorBar } from "victory-errorbar";
-import { VictoryTheme } from "victory-core/lib";
+import { VictoryTheme } from "victory-core";
 
 class App extends React.Component {
   render() {

diff --git a/demo/ts/components/victory-voronoi-demo.tsx b/demo/ts/components/victory-voronoi-demo.tsx
@@ -69,7 +69,7 @@ class VoronoiDemo extends React.Component<any, VoronoiDemoStateProps> {
       <div className="demo">
         <div style={containerStyle}>
           <VictoryVoronoi
-            theme={VictoryTheme.clean}
+            theme={VictoryTheme.material}
             style={{ parent: parentStyle }}
           />