Feat: apply clean theme to foundational chart demos (#2909)

FormidableLabs · Oct 9, 2024 · c677a4e · c677a4e
1 parent 988ff26
commit c677a4e
Show file tree

Hide file tree

Showing 32 changed files with 1,447 additions and 1,279 deletions.
diff --git a/.changeset/few-rings-approve.md b/.changeset/few-rings-approve.md
@@ -0,0 +1,9 @@
+---
+"victory-core": minor
+"victory-group": minor
+"victory-legend": minor
+"victory-pie": minor
+"victory-stack": minor
+---
+
+Minor updates for clean theme
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -11,8 +11,8 @@ on:
     branches:
       - main
     paths:
-      - 'stories/**'
-      - 'packages/**'
+      - "stories/**"
+      - "packages/**"
 
 jobs:
   chromatic:

diff --git a/demo/ts/components/animation-demo.tsx b/demo/ts/components/animation-demo.tsx
@@ -89,7 +89,14 @@ export default class App extends React.Component<any, any> {
   }
 
   getStyles() {
-    const colors = ["red", "orange", "gold", "tomato", "magenta", "purple"];
+    const colors = VictoryTheme.clean.bar?.colorScale ?? [
+      "red",
+      "orange",
+      "gold",
+      "tomato",
+      "magenta",
+      "purple",
+    ];
     return {
       fill: colors[random(0, 5)],
     };
@@ -122,21 +129,16 @@ export default class App extends React.Component<any, any> {
           <VictoryArea data={this.state.areaTransitionData} />
         </VictoryChart>
 
-        <VictoryStack
-          style={style}
-          animate
-          theme={VictoryTheme.material}
-          colorScale={"warm"}
-        >
+        <VictoryStack style={style} animate theme={VictoryTheme.clean}>
           {this.state.multiTransitionData.map((data, index) => {
             return (
               <VictoryArea key={index} data={data} interpolation={"basis"} />
             );
           })}
         </VictoryStack>
 
-        <VictoryChart style={style} animate theme={VictoryTheme.material}>
-          <VictoryStack colorScale={"warm"}>
+        <VictoryChart style={style} animate theme={VictoryTheme.clean}>
+          <VictoryStack>
             {this.state.multiTransitionData.map((data, index) => {
               return (
                 <VictoryArea key={index} data={data} interpolation={"basis"} />
@@ -145,7 +147,7 @@ export default class App extends React.Component<any, any> {
           </VictoryStack>
         </VictoryChart>
 
-        <VictoryChart style={style}>
+        <VictoryChart style={style} theme={VictoryTheme.clean}>
           <VictoryBar
             animate={{
               animationWhitelist: ["style"],
@@ -157,7 +159,7 @@ export default class App extends React.Component<any, any> {
           />
         </VictoryChart>
 
-        <VictoryChart style={style}>
+        <VictoryChart style={style} theme={VictoryTheme.clean}>
           <VictoryBar
             animate={{
               animationWhitelist: ["data"],

diff --git a/demo/ts/components/canvas-demo.tsx b/demo/ts/components/canvas-demo.tsx
@@ -259,9 +259,16 @@ const CanvasDemo = () => {
   };
 
   const getStyles = () => {
-    const colors = ["red", "orange", "gold", "tomato", "magenta", "purple"];
+    const colors = VictoryTheme.clean.palette?.qualitative ?? [
+      "red",
+      "orange",
+      "gold",
+      "tomato",
+      "magenta",
+      "purple",
+    ];
     return {
-      fill: colors[random(0, 5)],
+      fill: colors[random(0, colors.length - 1)],
     };
   };
 
@@ -280,7 +287,11 @@ const CanvasDemo = () => {
 
   return (
     <div className="demo" style={containerStyle}>
-      <VictoryChart theme={VictoryTheme.clean} animate style={{ parent: parentStyle }}>
+      <VictoryChart
+        theme={VictoryTheme.clean}
+        animate
+        style={{ parent: parentStyle }}
+      >
         {populationData.map(({ country, values }) => {
           const data = values.map(({ year, value }) => ({
             x: year,
@@ -298,14 +309,14 @@ const CanvasDemo = () => {
         <VictoryAxis tickFormat={(v) => v} />
         <VictoryAxis dependentAxis tickFormat={formatPopulation} />
       </VictoryChart>
-      <VictoryChart style={{ parent: parentStyle }}>
+      <VictoryChart theme={VictoryTheme.clean} style={{ parent: parentStyle }}>
         <VictoryScatter
           groupComponent={<CanvasGroup />}
           dataComponent={<CanvasPoint />}
           data={getRandomData(1000)}
         />
       </VictoryChart>
-      <VictoryChart style={{ parent: parentStyle }}>
+      <VictoryChart theme={VictoryTheme.clean} style={{ parent: parentStyle }}>
         <VictoryBar
           groupComponent={<CanvasGroup />}
           dataComponent={<CanvasBar />}

diff --git a/demo/ts/components/events-demo.tsx b/demo/ts/components/events-demo.tsx
@@ -5,7 +5,7 @@ import { VictoryStack } from "victory-stack";
 import { VictoryArea } from "victory-area";
 import { VictoryBar, VictoryBarTTargetType } from "victory-bar";
 import { VictoryLine } from "victory-line";
-import { VictoryTheme, VictoryLabel } from "victory-core";
+import { VictoryTheme, VictoryLabel, VictoryThemePalette } from "victory-core";
 
 class EventsDemo extends React.Component {
   render() {
@@ -21,6 +21,8 @@ class EventsDemo extends React.Component {
       parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" },
     };
     const barTarget: VictoryBarTTargetType = "data";
+    const themeColors: VictoryThemePalette =
+      VictoryTheme.clean.palette?.colors || {};
 
     return (
       <div className="demo">
@@ -29,8 +31,6 @@ class EventsDemo extends React.Component {
             theme={VictoryTheme.clean}
             style={{
               parent: chartStyle.parent,
-              data: { fill: "blue", width: 20 },
-              labels: { fontSize: 20 },
             }}
             labels={["a", "b", "c", "d", "e"]}
             data={[
@@ -49,15 +49,17 @@ class EventsDemo extends React.Component {
                     evt.stopPropagation();
                     return [
                       {
-                        mutation: () => {
-                          return { style: { fill: "orange", width: 20 } };
+                        mutation: (props) => {
+                          return {
+                            style: { ...props.style, fill: themeColors.teal },
+                          };
                         },
                       },
                       {
                         target: "labels",
                         eventKey: 3,
-                        mutation: () => {
-                          return { text: "now click me" };
+                        mutation: (props) => {
+                          return { ...props.style, text: "now click me" };
                         },
                       },
                     ];
@@ -71,8 +73,13 @@ class EventsDemo extends React.Component {
                     return [
                       {
                         target: "data",
-                        mutation: () => {
-                          return { style: { fill: "tomato", width: 10 } };
+                        mutation: (props) => {
+                          return {
+                            style: {
+                              ...props.style,
+                              fill: themeColors.pink,
+                            },
+                          };
                         },
                       },
                     ];
@@ -83,6 +90,7 @@ class EventsDemo extends React.Component {
           />
 
           <VictoryChart
+            theme={VictoryTheme.clean}
             style={chartStyle}
             domainPadding={{ x: 30, y: 30 }}
             events={[
@@ -105,7 +113,7 @@ class EventsDemo extends React.Component {
                         target: "data",
                         mutation: (props) => {
                           return {
-                            style: Object.assign({}, props.style, { stroke: "lime" }),
+                            style: { ...props.style, stroke: themeColors.teal },
                           };
                         },
                       },
@@ -114,7 +122,7 @@ class EventsDemo extends React.Component {
                         target: "labels",
                         mutation: (props) => {
                           return {
-                            style: Object.assign({}, props.style, { fill: "green" }),
+                            style: { ...props.style, fill: themeColors.purple },
                             text: "waddup",
                           };
                         },
@@ -128,7 +136,6 @@ class EventsDemo extends React.Component {
             <VictoryBar
               name="bar"
               labels={() => null}
-              style={{ data: { width: 15, fill: "green" } }}
               data={[
                 { x: 1, y: 1 },
                 { x: 2, y: 2 },
@@ -148,13 +155,14 @@ class EventsDemo extends React.Component {
             <VictoryLine
               name="line"
               y={() => 0.5}
-              style={{ data: { stroke: "blue", strokeWidth: 5 } }}
+              style={{ data: { stroke: themeColors.purple } }}
             />
           </VictoryChart>
 
           <VictoryChart
             theme={VictoryTheme.clean}
             style={chartStyle}
+            domainPadding={20}
             events={[
               {
                 childName: "bar",
@@ -164,8 +172,10 @@ class EventsDemo extends React.Component {
                     evt.stopPropagation();
                     return [
                       {
-                        mutation: () => {
-                          return { style: { fill: "orange" } };
+                        mutation: (props) => {
+                          return {
+                            style: { ...props.style, fill: themeColors.yellow },
+                          };
                         },
                       },
                     ];
@@ -190,13 +200,18 @@ class EventsDemo extends React.Component {
               },
             ]}
           >
-            <VictoryLabel text="Parent Events" y={50} x={150} style={{...VictoryTheme.clean.label, fontSize: 18 }} />
+            <VictoryLabel
+              text="Parent Events"
+              y={50}
+              x={150}
+              style={{ ...VictoryTheme.clean.label, fontSize: 18 }}
+            />
             <VictoryBar name="bar" labels={() => null} />
           </VictoryChart>
 
           <VictoryChart
             style={chartStyle}
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             events={[
               {
                 childName: ["area-1", "area-2"],
@@ -209,9 +224,14 @@ class EventsDemo extends React.Component {
                         target: "data",
                         mutation: (props) => {
                           const fill = props.style && props.style.fill;
-                          return fill === "gold"
+                          return fill === themeColors.yellow
                             ? null
-                            : { style: { fill: "gold" } };
+                            : {
+                                style: {
+                                  ...props.style,
+                                  fill: themeColors.yellow,
+                                },
+                              };
                         },
                       },
                     ];