Skip to content

Commit cc5c4a3

Browse files
ramenhogramenhog
authored
Updates for clean theme legend and demos (#2915)
1 parent 25333ab commit cc5c4a3

19 files changed

+519
-511
lines changed

‎.changeset/spicy-kings-wave.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"victory-core": minor
3+
---
4+
5+
more minor updates to clean theme

‎demo/ts/components/create-container-demo.tsx

+28-54
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ import { VictoryLine } from "victory-line";
1111
import { VictoryScatter } from "victory-scatter";
1212
import { VictoryTooltip } from "victory-tooltip";
1313
import { VictoryLegend } from "victory-legend";
14-
import { VictoryTheme } from "victory-core/lib";
14+
import { VictoryTheme } from "victory-core";
15+
16+
const themeColors = VictoryTheme.clean.palette?.colors || {};
1517

1618
const Charts = ({ behaviors }) => {
1719
const containerStyle: React.CSSProperties = {
@@ -34,6 +36,7 @@ const Charts = ({ behaviors }) => {
3436
{/* A */}
3537
<VictoryChart
3638
style={chartStyle}
39+
theme={VictoryTheme.clean}
3740
height={400}
3841
padding={{ top: 100, bottom: 50, left: 50, right: 50 }}
3942
domainPadding={{ y: 2 }}
@@ -58,11 +61,10 @@ const Charts = ({ behaviors }) => {
5861
centerTitle
5962
orientation="horizontal"
6063
gutter={20}
61-
style={{ border: { stroke: "black" }, title: { fontSize: 20 } }}
6264
data={[
63-
{ name: "One", symbol: { fill: "tomato" } },
64-
{ name: "Two", symbol: { fill: "orange" } },
65-
{ name: "Three", symbol: { fill: "gold" } },
65+
{ name: "One", symbol: { fill: themeColors.red } },
66+
{ name: "Two", symbol: { fill: themeColors.orange } },
67+
{ name: "Three", symbol: { fill: themeColors.yellow } },
6668
]}
6769
/>
6870
<VictoryLine
@@ -74,10 +76,10 @@ const Charts = ({ behaviors }) => {
7476
]}
7577
style={{
7678
data: {
77-
stroke: "tomato",
79+
stroke: themeColors.red,
7880
strokeWidth: ({ active }) => (active ? 4 : 2),
7981
},
80-
labels: { fill: "tomato" },
82+
labels: { fill: themeColors.red },
8183
}}
8284
/>
8385

@@ -89,10 +91,10 @@ const Charts = ({ behaviors }) => {
8991
]}
9092
style={{
9193
data: {
92-
stroke: "blue",
94+
stroke: themeColors.orange,
9395
strokeWidth: ({ active }) => (active ? 4 : 2),
9496
},
95-
labels: { fill: "blue" },
97+
labels: { fill: themeColors.orange },
9698
}}
9799
/>
98100

@@ -104,10 +106,10 @@ const Charts = ({ behaviors }) => {
104106
]}
105107
style={{
106108
data: {
107-
stroke: "black",
109+
stroke: themeColors.yellow,
108110
strokeWidth: ({ active }) => (active ? 4 : 2),
109111
},
110-
labels: { fill: "black" },
112+
labels: { fill: themeColors.yellow },
111113
}}
112114
/>
113115
</VictoryChart>
@@ -120,9 +122,9 @@ const Charts = ({ behaviors }) => {
120122
labels={({ datum }) => round(datum.x, 2)}
121123
cursorLabel={({ datum }) => round(datum.x, 2)}
122124
selectionStyle={{
123-
stroke: "tomato",
125+
stroke: themeColors.red,
124126
strokeWidth: 2,
125-
fill: "tomato",
127+
fill: themeColors.red,
126128
fillOpacity: 0.1,
127129
}}
128130
selectedDomain={{ x: [0.4, 0.95], y: [0.5, 0.8] }}
@@ -133,7 +135,10 @@ const Charts = ({ behaviors }) => {
133135
<VictoryScatter
134136
style={{
135137
data: {
136-
fill: ({ active }) => (active ? "tomato" : "black"),
138+
fill: ({ active }) =>
139+
active
140+
? themeColors.red || "tomato"
141+
: themeColors.yellow || "yellow",
137142
},
138143
}}
139144
size={({ active }) => (active ? 5 : 3)}
@@ -151,7 +156,7 @@ const Charts = ({ behaviors }) => {
151156
<VictoryGroup style={chartStyle}>
152157
<VictoryScatter
153158
style={{
154-
data: { fill: "tomato" },
159+
data: { fill: themeColors.blue },
155160
}}
156161
size={({ active }) => (active ? 5 : 3)}
157162
labels={({ datum }) => datum.y}
@@ -160,11 +165,6 @@ const Charts = ({ behaviors }) => {
160165
pointerLength={4}
161166
flyoutPadding={{ top: 8, bottom: 8, left: 16, right: 16 }}
162167
cornerRadius={1}
163-
flyoutStyle={{
164-
stroke: "#757575",
165-
strokeWidth: 2,
166-
fill: "white",
167-
}}
168168
/>
169169
}
170170
data={[
@@ -179,7 +179,7 @@ const Charts = ({ behaviors }) => {
179179
/>
180180
<VictoryScatter
181181
style={{
182-
data: { fill: "blue" },
182+
data: { fill: themeColors.purple },
183183
}}
184184
size={({ active }) => (active ? 5 : 3)}
185185
labels={({ datum }) => datum.y}
@@ -188,11 +188,6 @@ const Charts = ({ behaviors }) => {
188188
pointerLength={4}
189189
flyoutPadding={{ top: 8, bottom: 8, left: 16, right: 16 }}
190190
cornerRadius={1}
191-
flyoutStyle={{
192-
stroke: "#757575",
193-
strokeWidth: 2,
194-
fill: "white",
195-
}}
196191
/>
197192
}
198193
data={[
@@ -206,6 +201,9 @@ const Charts = ({ behaviors }) => {
206201
]}
207202
/>
208203
<VictoryScatter
204+
style={{
205+
data: { fill: themeColors.green },
206+
}}
209207
data={[
210208
{ x: 1, y: 5 },
211209
{ x: 2, y: -4 },
@@ -221,11 +219,6 @@ const Charts = ({ behaviors }) => {
221219
pointerLength={4}
222220
flyoutPadding={{ top: 8, bottom: 8, left: 16, right: 16 }}
223221
cornerRadius={1}
224-
flyoutStyle={{
225-
stroke: "#757575",
226-
strokeWidth: 2,
227-
fill: "white",
228-
}}
229222
/>
230223
}
231224
size={({ active }) => (active ? 5 : 3)}
@@ -234,20 +227,14 @@ const Charts = ({ behaviors }) => {
234227
</VictoryChart>
235228
{/* D */}
236229
<VictoryStack
230+
theme={VictoryTheme.clean}
237231
style={chartStyle}
238232
containerComponent={
239233
<CustomContainer selectedDomain={{ x: [1.5, 2.5], y: [-3, 4] }} />
240234
}
241235
>
242236
<VictoryBar
243-
style={{
244-
data: {
245-
fill: "tomato",
246-
stroke: ({ active }) => (active ? "black" : "none"),
247-
strokeWidth: 2,
248-
},
249-
}}
250-
barWidth={({ active }) => (active ? 5 : 3)}
237+
barWidth={({ active }) => (active ? 10 : 8)}
251238
data={[
252239
{ x: 1, y: -5 },
253240
{ x: 2, y: 4 },
@@ -259,14 +246,7 @@ const Charts = ({ behaviors }) => {
259246
]}
260247
/>
261248
<VictoryBar
262-
style={{
263-
data: {
264-
fill: "orange",
265-
stroke: ({ active }) => (active ? "black" : "none"),
266-
strokeWidth: 2,
267-
},
268-
}}
269-
barWidth={({ active }) => (active ? 5 : 3)}
249+
barWidth={({ active }) => (active ? 10 : 8)}
270250
data={[
271251
{ x: 1, y: -3 },
272252
{ x: 2, y: 5 },
@@ -278,13 +258,7 @@ const Charts = ({ behaviors }) => {
278258
]}
279259
/>
280260
<VictoryBar
281-
style={{
282-
data: {
283-
fill: "gold",
284-
stroke: ({ active }) => (active ? "black" : "none"),
285-
strokeWidth: 2,
286-
},
287-
}}
261+
barWidth={({ active }) => (active ? 10 : 8)}
288262
data={[
289263
{ x: 1, y: 5 },
290264
{ x: 2, y: -4 },

‎demo/ts/components/draggable-demo.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ class App extends React.Component<any, DraggableDemoInterface> {
200200
brushDomain={bar.range}
201201
onBrushDomainChange={this.onDomainChange.bind(this)}
202202
brushStyle={{
203-
fill: "skyBlue",
203+
fill: VictoryTheme.clean.palette?.colors?.cyan,
204204
opacity: ({ active }) => (active ? 1 : 0.5),
205205
}}
206206
/>
@@ -219,7 +219,7 @@ class App extends React.Component<any, DraggableDemoInterface> {
219219
}
220220
style={{
221221
data: {
222-
fill: "skyBlue",
222+
fill: VictoryTheme.clean.palette?.colors?.cyan,
223223
opacity: ({ active }) => (active ? 1 : 0.5),
224224
cursor: "move",
225225
},
@@ -264,14 +264,14 @@ class App extends React.Component<any, DraggableDemoInterface> {
264264
data={this.state.points}
265265
size={5}
266266
style={{
267-
data: { fill: "skyBlue" },
267+
data: { fill: VictoryTheme.clean.palette?.colors?.cyan },
268268
}}
269269
x="name"
270270
y="date"
271271
/>
272272
<VictoryBar
273273
style={{
274-
data: { fill: "skyBlue" },
274+
data: { fill: VictoryTheme.clean.palette?.colors?.cyan },
275275
}}
276276
data={this.state.bars}
277277
x="name"

‎demo/ts/components/ouia-demo.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import { VictoryChart } from "victory-chart";
33
import { VictoryLine } from "victory-line";
4-
import { VictoryContainer } from "victory-core";
4+
import { VictoryContainer, VictoryTheme } from "victory-core";
55

66
class OuiaDemo extends React.Component<any> {
77
constructor(props: any) {
@@ -25,6 +25,7 @@ class OuiaDemo extends React.Component<any> {
2525
<h1>Open UI Automation (OUIA)</h1>
2626
<div style={containerStyle}>
2727
<VictoryChart
28+
theme={VictoryTheme.clean}
2829
containerComponent={
2930
<VictoryContainer
3031
ouiaId="victory-container-ouia"

‎demo/ts/components/primitives-demo.tsx

+16-14
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { VictoryPolarAxis } from "victory-polar-axis";
88
import { Arc, LineSegment, VictoryTheme, Whisker } from "victory-core";
99
import { range, random } from "lodash";
1010

11+
const themeColors = VictoryTheme.clean.palette?.colors || {};
12+
1113
interface PrimitivesDemoState {
1214
axisBackgroundColor: string;
1315
whiskersActive: boolean;
@@ -20,7 +22,7 @@ class App extends React.Component<any, PrimitivesDemoState> {
2022
constructor(props: any) {
2123
super(props);
2224
this.state = {
23-
axisBackgroundColor: "mediumseagreen",
25+
axisBackgroundColor: themeColors.green || "mediumseagreen",
2426
whiskersActive: true,
2527
};
2628
}
@@ -44,9 +46,10 @@ class App extends React.Component<any, PrimitivesDemoState> {
4446

4547
handleClick() {
4648
const newBackgroundColor =
47-
this.state.axisBackgroundColor === "mediumseagreen"
48-
? "paleturquoise"
49-
: "mediumseagreen";
49+
this.state.axisBackgroundColor === "mediumseagreen" ||
50+
this.state.axisBackgroundColor === themeColors.green
51+
? themeColors.cyan || "paleturquoise"
52+
: themeColors.green || "mediumseagreen";
5053

5154
this.setState({ axisBackgroundColor: newBackgroundColor });
5255
}
@@ -86,7 +89,7 @@ class App extends React.Component<any, PrimitivesDemoState> {
8689
return (
8790
<div className="demo">
8891
<div style={containerStyle}>
89-
<VictoryChart polar style={chartStyle}>
92+
<VictoryChart polar style={chartStyle} theme={VictoryTheme.clean}>
9093
<VictoryPolarAxis
9194
circularAxisComponent={
9295
<Arc
@@ -95,7 +98,7 @@ class App extends React.Component<any, PrimitivesDemoState> {
9598
cy={0}
9699
startAngle={0}
97100
endAngle={180}
98-
style={{ fill: "tomato", stroke: "none" }}
101+
style={{ fill: themeColors.red }}
99102
/>
100103
}
101104
/>
@@ -108,13 +111,13 @@ class App extends React.Component<any, PrimitivesDemoState> {
108111
cy={0}
109112
startAngle={180}
110113
endAngle={360}
111-
style={{ fill: "salmon", stroke: "none" }}
114+
style={{ fill: themeColors.pink }}
112115
/>
113116
}
114117
/>
115118
</VictoryChart>
116119

117-
<VictoryChart style={axisChartStyle}>
120+
<VictoryChart style={axisChartStyle} theme={VictoryTheme.clean}>
118121
<VictoryAxis
119122
crossAxis
120123
axisComponent={
@@ -123,8 +126,6 @@ class App extends React.Component<any, PrimitivesDemoState> {
123126
style={lineSegmentStyle}
124127
/>
125128
}
126-
width={400}
127-
height={400}
128129
domain={[-10, 10]}
129130
offsetY={200}
130131
standalone={false}
@@ -138,17 +139,18 @@ class App extends React.Component<any, PrimitivesDemoState> {
138139
style={lineSegmentStyle}
139140
/>
140141
}
141-
width={400}
142-
height={400}
143142
domain={[-10, 10]}
144143
offsetX={200}
145144
standalone={false}
146145
/>
147146
</VictoryChart>
148147

149-
<VictoryChart domainPadding={20} theme={VictoryTheme.clean}>
148+
<VictoryChart
149+
domainPadding={20}
150+
theme={VictoryTheme.clean}
151+
style={chartStyle}
152+
>
150153
<VictoryBoxPlot
151-
boxWidth={20}
152154
data={this.state.boxPlotData}
153155
maxComponent={<Whisker active={this.state.whiskersActive} />}
154156
minComponent={<Whisker active={this.state.whiskersActive} />}

0 commit comments

Comments
 (0)