Create new Clean theme (#2899)

Co-authored-by: Christy Presler <[email protected]>
FormidableLabs · Sep 23, 2024 · 85b8612 · 85b8612
1 parent 7e79cfb
commit 85b8612
Show file tree

Hide file tree

Showing 41 changed files with 675 additions and 149 deletions.
diff --git a/demo/ts/components/accessibility-demo.tsx b/demo/ts/components/accessibility-demo.tsx
@@ -20,6 +20,7 @@ import {
   Point,
   VictoryLabel,
   VictoryAccessibleGroup,
+  VictoryTheme,
 } from "victory-core";
 import {
   accessibilityBarData,
@@ -86,9 +87,8 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
             data-testid="bar-accessibility-chart"
           >
             <h3 style={chartHeadingStyle}>Bar chart</h3>
-            <VictoryChart domainPadding={{ x: 40, y: 40 }}>
+            <VictoryChart theme={VictoryTheme.clean} domainPadding={{ x: 40, y: 40 }}>
               <VictoryBar
-                style={{ data: { fill: "#c43a31" } }}
                 data={accessibilityBarData}
                 dataComponent={
                   <Bar
@@ -103,7 +103,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
           {/** BOXPLOT */}
           <div style={chartContainerStyle}>
             <h3 style={chartHeadingStyle}>BoxPlot</h3>
-            <VictoryChart domainPadding={{ x: 40, y: 40 }}>
+            <VictoryChart theme={VictoryTheme.clean} domainPadding={{ x: 40, y: 40 }}>
               <VictoryBoxPlot
                 minLabels
                 maxLabels
@@ -163,7 +163,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
           {/** AREA */}
           <div style={chartContainerStyle}>
             <h3 style={chartHeadingStyle}>Area</h3>
-            <VictoryChart>
+            <VictoryChart theme={VictoryTheme.clean}>
               <VictoryStack
                 groupComponent={
                   <VictoryAccessibleGroup
@@ -175,8 +175,8 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
                 }
               >
                 <VictoryArea
+                  style={{ data: { fill: "#D0F0FD" } }}
                   data={accessibilityAreaData.a}
-                  style={{ data: { fill: "#c43a31" } }}
                   dataComponent={
                     <Area
                       ariaLabel={({ data }) =>
@@ -186,8 +186,8 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
                     />
                   }
                 />
-                <VictoryArea
-                  style={{ data: { fill: "#c43a31", opacity: 0.9 } }}
+                <VictoryArea 
+                  style={{ data: { fill: "#77D1F3" } }}
                   data={accessibilityAreaData.b}
                   dataComponent={
                     <Area
@@ -199,20 +199,20 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
                   }
                 />
                 <VictoryArea
+                  style={{ data: { fill: "#18BFFF" } }}
                   data={accessibilityAreaData.c}
-                  style={{ data: { fill: "#c43a31", opacity: 0.8 } }}
                   dataComponent={
-                    <Area
+                      <Area
                       ariaLabel={({ data }) =>
                         `area chart stack ${data?.[0]._stack}`
-                      }
-                      tabIndex={20.2}
+                    }
+                    tabIndex={20.2}
                     />
                   }
                 />
                 <VictoryArea
+                  style={{ data: { fill: "#0B76B7" } }}
                   data={accessibilityAreaData.d}
-                  style={{ data: { fill: "#c43a31", opacity: 0.6 } }}
                   dataComponent={
                     <Area
                       ariaLabel={({ data }) =>
@@ -229,7 +229,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
           {/** LINE */}
           <div style={chartContainerStyle}>
             <h3 style={chartHeadingStyle}>Line</h3>
-            <VictoryChart domain={{ x: [0, 6], y: [1, 7] }}>
+            <VictoryChart theme={VictoryTheme.clean} domain={{ x: [0, 6], y: [1, 7] }}>
               <VictoryLine
                 data={accessibilityLineData}
                 labels={({ datum }) => datum.y}
@@ -261,6 +261,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
           <div style={chartContainerStyle}>
             <h3 style={chartHeadingStyle}>Pie</h3>
             <VictoryPie
+              theme={VictoryTheme.clean}
               style={{ labels: { fill: "white", fontSize: 10 } }}
               labelRadius={({ datum }) => datum.radius - 12}
               width={400}
@@ -279,9 +280,8 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
           {/** SCATTER */}
           <div style={chartContainerStyle}>
             <h3 style={chartHeadingStyle}>Scatter</h3>
-            <VictoryChart domain={{ x: [0, 6], y: [0, 8] }}>
+            <VictoryChart theme={VictoryTheme.clean} domain={{ x: [0, 6], y: [0, 8] }}>
               <VictoryScatter
-                style={{ data: { fill: "#c43a31" } }}
                 size={7}
                 data={accessibilityScatterData}
                 dataComponent={
@@ -299,9 +299,8 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
           {/** VORONOI */}
           <div style={chartContainerStyle}>
             <h3 style={chartHeadingStyle}>Voronoi</h3>
-            <VictoryChart>
+            <VictoryChart theme={VictoryTheme.clean} >
               <VictoryVoronoi
-                style={{ data: { stroke: "#c43a31", strokeWidth: 2 } }}
                 data={accessibilityVoronoiData}
                 dataComponent={
                   <Voronoi
@@ -318,7 +317,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
           {/** CANDLESTICK */}
           <div style={chartContainerStyle}>
             <h3 style={chartHeadingStyle}>Candlestick</h3>
-            <VictoryChart domainPadding={{ x: 25 }}>
+            <VictoryChart theme={VictoryTheme.clean} domainPadding={{ x: 25 }}>
               <VictoryCandlestick
                 data={accessibilityCandlestickData}
                 dataComponent={
@@ -336,7 +335,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
           {/** ERRORBAR */}
           <div style={chartContainerStyle}>
             <h3 style={chartHeadingStyle}>ErrorBar</h3>
-            <VictoryChart domainPadding={15}>
+            <VictoryChart theme={VictoryTheme.clean} domainPadding={15}>
               <VictoryErrorBar
                 data={accessibilityErrorBarData}
                 errorX={(datum) => datum.error * datum.x}
@@ -356,8 +355,9 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
           {/** ACCESSIBLE GROUP */}
           <div style={chartContainerStyle}>
             <h3 style={chartHeadingStyle}>Accessible Group</h3>
-            <VictoryChart domainPadding={{ x: 40 }}>
+            <VictoryChart theme={VictoryTheme.clean} domainPadding={{ x: 40 }}>
               <VictoryGroup
+                theme={VictoryTheme.clean}
                 offset={20}
                 groupComponent={
                   <VictoryAccessibleGroup
@@ -369,7 +369,6 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
                 <VictoryBar horizontal data={accessibilityGroupData.a} />
                 <VictoryBar
                   horizontal
-                  style={{ data: { fill: "#c43a31", opacity: 0.9 } }}
                   data={accessibilityGroupData.b}
                   groupComponent={
                     <VictoryAccessibleGroup

diff --git a/demo/ts/components/animation-demo.tsx b/demo/ts/components/animation-demo.tsx
@@ -115,10 +115,10 @@ export default class App extends React.Component<any, any> {
           animate
           data={this.state.areaTransitionData}
           x={(d) => d.x}
-          theme={VictoryTheme.material}
+          theme={VictoryTheme.clean}
         />
 
-        <VictoryChart style={style} animate theme={VictoryTheme.material}>
+        <VictoryChart style={style} animate theme={VictoryTheme.clean}>
           <VictoryArea data={this.state.areaTransitionData} />
         </VictoryChart>
 

diff --git a/demo/ts/components/canvas-demo.tsx b/demo/ts/components/canvas-demo.tsx
@@ -13,6 +13,7 @@ import {
   CanvasGroup,
   CanvasPoint,
 } from "victory-canvas";
+import { VictoryTheme } from "victory-core/lib";
 
 const populationData = [
   {
@@ -279,7 +280,7 @@ const CanvasDemo = () => {
 
   return (
     <div className="demo" style={containerStyle}>
-      <VictoryChart animate style={{ parent: parentStyle }}>
+      <VictoryChart theme={VictoryTheme.clean} animate style={{ parent: parentStyle }}>
         {populationData.map(({ country, values }) => {
           const data = values.map(({ year, value }) => ({
             x: year,

diff --git a/demo/ts/components/create-container-demo.tsx b/demo/ts/components/create-container-demo.tsx
@@ -11,6 +11,7 @@ import { VictoryLine } from "victory-line";
 import { VictoryScatter } from "victory-scatter";
 import { VictoryTooltip } from "victory-tooltip";
 import { VictoryLegend } from "victory-legend";
+import { VictoryTheme } from "victory-core/lib";
 
 const Charts = ({ behaviors }) => {
   const containerStyle: React.CSSProperties = {
@@ -112,6 +113,7 @@ const Charts = ({ behaviors }) => {
         </VictoryChart>
         {/* B */}
         <VictoryChart
+          theme={VictoryTheme.clean}
           style={{ parent: chartStyle.parent }}
           containerComponent={
             <CustomContainer
@@ -140,6 +142,7 @@ const Charts = ({ behaviors }) => {
         </VictoryChart>
         {/* C */}
         <VictoryChart
+          theme={VictoryTheme.clean}
           style={chartStyle}
           containerComponent={
             <CustomContainer selectedDomain={{ x: [0, 0] }} />
@@ -152,7 +155,18 @@ const Charts = ({ behaviors }) => {
               }}
               size={({ active }) => (active ? 5 : 3)}
               labels={({ datum }) => datum.y}
-              labelComponent={<VictoryTooltip />}
+              labelComponent={
+                <VictoryTooltip
+                  pointerLength={4}
+                  flyoutPadding={{ top: 8, bottom: 8, left: 16, right: 16 }}
+                  cornerRadius={1}
+                  flyoutStyle={{
+                    stroke: "#757575",
+                    strokeWidth: 2,
+                    fill: "white",
+                  }}
+                />
+              }
               data={[
                 { x: 1, y: -5 },
                 { x: 2, y: 4 },
@@ -169,7 +183,18 @@ const Charts = ({ behaviors }) => {
               }}
               size={({ active }) => (active ? 5 : 3)}
               labels={({ datum }) => datum.y}
-              labelComponent={<VictoryTooltip />}
+              labelComponent={
+                <VictoryTooltip
+                  pointerLength={4}
+                  flyoutPadding={{ top: 8, bottom: 8, left: 16, right: 16 }}
+                  cornerRadius={1}
+                  flyoutStyle={{
+                    stroke: "#757575",
+                    strokeWidth: 2,
+                    fill: "white",
+                  }}
+                />
+              }
               data={[
                 { x: 1, y: -3 },
                 { x: 2, y: 5 },
@@ -191,7 +216,18 @@ const Charts = ({ behaviors }) => {
                 { x: 7, y: -3 },
               ]}
               labels={({ datum }) => datum.y}
-              labelComponent={<VictoryTooltip />}
+              labelComponent={
+                <VictoryTooltip
+                  pointerLength={4}
+                  flyoutPadding={{ top: 8, bottom: 8, left: 16, right: 16 }}
+                  cornerRadius={1}
+                  flyoutStyle={{
+                    stroke: "#757575",
+                    strokeWidth: 2,
+                    fill: "white",
+                  }}
+                />
+              }
               size={({ active }) => (active ? 5 : 3)}
             />
           </VictoryGroup>

diff --git a/demo/ts/components/draggable-demo.tsx b/demo/ts/components/draggable-demo.tsx
@@ -11,6 +11,7 @@ import {
   VictoryClipContainer,
   Point,
   Selection,
+  VictoryTheme,
 } from "victory-core";
 import { VictoryZoomContainer } from "victory-zoom-container";
 import { VictoryBrushContainer } from "victory-brush-container";
@@ -163,6 +164,7 @@ class App extends React.Component<any, DraggableDemoInterface> {
     return (
       <div style={containerStyle}>
         <VictoryChart
+          theme={VictoryTheme.clean}
           horizontal
           {...sharedProps}
           height={400}
@@ -228,6 +230,7 @@ class App extends React.Component<any, DraggableDemoInterface> {
           />
         </VictoryChart>
         <VictoryChart
+          theme={VictoryTheme.clean}
           horizontal
           {...sharedProps}
           padding={{ top: 30, left: 50, right: 30, bottom: 0 }}

diff --git a/demo/ts/components/events-demo.tsx b/demo/ts/components/events-demo.tsx
@@ -26,6 +26,7 @@ class EventsDemo extends React.Component {
       <div className="demo">
         <div style={containerStyle}>
           <VictoryBar
+            theme={VictoryTheme.clean}
             style={{
               parent: chartStyle.parent,
               data: { fill: "blue", width: 20 },
@@ -152,6 +153,7 @@ class EventsDemo extends React.Component {
           </VictoryChart>
 
           <VictoryChart
+            theme={VictoryTheme.clean}
             style={chartStyle}
             events={[
               {
@@ -188,7 +190,7 @@ class EventsDemo extends React.Component {
               },
             ]}
           >
-            <VictoryLabel text="Parent Events" y={50} x={150} />
+            <VictoryLabel text="Parent Events" y={50} x={150} style={{...VictoryTheme.clean.label, fontSize: 18 }} />
             <VictoryBar name="bar" labels={() => null} />
           </VictoryChart>
 

diff --git a/demo/ts/components/external-events-demo.tsx b/demo/ts/components/external-events-demo.tsx
@@ -9,6 +9,7 @@ import { VictoryLine } from "victory-line";
 import { VictoryZoomContainer } from "victory-zoom-container";
 import { VictoryVoronoiContainer } from "victory-voronoi-container";
 import { range } from "lodash";
+import { VictoryTheme } from "victory-core/lib";
 
 class App extends React.Component<any, any> {
   constructor(props) {
@@ -105,6 +106,7 @@ class App extends React.Component<any, any> {
             </li>
           </ul>
           <VictoryChart
+            theme={VictoryTheme.clean}
             style={chartStyle}
             domainPadding={{ x: 40 }}
             animate
@@ -139,7 +141,7 @@ class App extends React.Component<any, any> {
               name="data"
               labels={() => null}
               data={this.state.data}
-              style={{ data: { fill: "cyan" } }}
+              // style={{ data: { fill: "cyan" } }}
             />
           </VictoryChart>
 
@@ -228,6 +230,7 @@ class App extends React.Component<any, any> {
             </VictoryStack>
           </VictoryChart>
           <VictoryStack
+            theme={VictoryTheme.clean}
             style={chartStyle}
             externalEventMutations={this.state.externalMutation}
             containerComponent={<VictoryVoronoiContainer />}
@@ -241,7 +244,8 @@ class App extends React.Component<any, any> {
                   strokeWidth: 2,
                 },
               }}
-              barWidth={({ active }) => (active ? 5 : 3)}
+              cornerRadius={{ top: 1, bottom: 1 }}
+              barWidth={({ active }) => (active ? 7 : 4)}
               data={[
                 { x: 1, y: -5 },
                 { x: 2, y: 4 },
@@ -260,7 +264,8 @@ class App extends React.Component<any, any> {
                   strokeWidth: 2,
                 },
               }}
-              barWidth={({ active }) => (active ? 5 : 3)}
+              cornerRadius={{ top: 1, bottom: 1 }}
+              barWidth={({ active }) => (active ? 7 : 4)}
               data={[
                 { x: 1, y: -3 },
                 { x: 2, y: 5 },

diff --git a/demo/ts/components/group-demo.tsx b/demo/ts/components/group-demo.tsx
@@ -11,6 +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";
 
 class App extends React.Component {
   getGroupData() {
@@ -57,7 +58,11 @@ class App extends React.Component {
     return (
       <div className="demo">
         <div style={containerStyle}>
-          <VictoryChart style={chartStyle} domainPadding={20}>
+          <VictoryChart
+            theme={VictoryTheme.clean}
+            style={chartStyle}
+            domainPadding={20}
+          >
             <VictoryStack
               style={{
                 data: { strokeDasharray: "10, 5" },