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,
+ },
+ };
  },
  },
  ];