Skip to content

Commit 85b8612

Browse files
cpreslercpresler
authored
Create new Clean theme (#2899)
Co-authored-by: Christy Presler <[email protected]>
1 parent 7e79cfb commit 85b8612

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+675
-149
lines changed

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

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
Point,
2121
VictoryLabel,
2222
VictoryAccessibleGroup,
23+
VictoryTheme,
2324
} from "victory-core";
2425
import {
2526
accessibilityBarData,
@@ -86,9 +87,8 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
8687
data-testid="bar-accessibility-chart"
8788
>
8889
<h3 style={chartHeadingStyle}>Bar chart</h3>
89-
<VictoryChart domainPadding={{ x: 40, y: 40 }}>
90+
<VictoryChart theme={VictoryTheme.clean} domainPadding={{ x: 40, y: 40 }}>
9091
<VictoryBar
91-
style={{ data: { fill: "#c43a31" } }}
9292
data={accessibilityBarData}
9393
dataComponent={
9494
<Bar
@@ -103,7 +103,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
103103
{/** BOXPLOT */}
104104
<div style={chartContainerStyle}>
105105
<h3 style={chartHeadingStyle}>BoxPlot</h3>
106-
<VictoryChart domainPadding={{ x: 40, y: 40 }}>
106+
<VictoryChart theme={VictoryTheme.clean} domainPadding={{ x: 40, y: 40 }}>
107107
<VictoryBoxPlot
108108
minLabels
109109
maxLabels
@@ -163,7 +163,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
163163
{/** AREA */}
164164
<div style={chartContainerStyle}>
165165
<h3 style={chartHeadingStyle}>Area</h3>
166-
<VictoryChart>
166+
<VictoryChart theme={VictoryTheme.clean}>
167167
<VictoryStack
168168
groupComponent={
169169
<VictoryAccessibleGroup
@@ -175,8 +175,8 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
175175
}
176176
>
177177
<VictoryArea
178+
style={{ data: { fill: "#D0F0FD" } }}
178179
data={accessibilityAreaData.a}
179-
style={{ data: { fill: "#c43a31" } }}
180180
dataComponent={
181181
<Area
182182
ariaLabel={({ data }) =>
@@ -186,8 +186,8 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
186186
/>
187187
}
188188
/>
189-
<VictoryArea
190-
style={{ data: { fill: "#c43a31", opacity: 0.9 } }}
189+
<VictoryArea
190+
style={{ data: { fill: "#77D1F3" } }}
191191
data={accessibilityAreaData.b}
192192
dataComponent={
193193
<Area
@@ -199,20 +199,20 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
199199
}
200200
/>
201201
<VictoryArea
202+
style={{ data: { fill: "#18BFFF" } }}
202203
data={accessibilityAreaData.c}
203-
style={{ data: { fill: "#c43a31", opacity: 0.8 } }}
204204
dataComponent={
205-
<Area
205+
<Area
206206
ariaLabel={({ data }) =>
207207
`area chart stack ${data?.[0]._stack}`
208-
}
209-
tabIndex={20.2}
208+
}
209+
tabIndex={20.2}
210210
/>
211211
}
212212
/>
213213
<VictoryArea
214+
style={{ data: { fill: "#0B76B7" } }}
214215
data={accessibilityAreaData.d}
215-
style={{ data: { fill: "#c43a31", opacity: 0.6 } }}
216216
dataComponent={
217217
<Area
218218
ariaLabel={({ data }) =>
@@ -229,7 +229,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
229229
{/** LINE */}
230230
<div style={chartContainerStyle}>
231231
<h3 style={chartHeadingStyle}>Line</h3>
232-
<VictoryChart domain={{ x: [0, 6], y: [1, 7] }}>
232+
<VictoryChart theme={VictoryTheme.clean} domain={{ x: [0, 6], y: [1, 7] }}>
233233
<VictoryLine
234234
data={accessibilityLineData}
235235
labels={({ datum }) => datum.y}
@@ -261,6 +261,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
261261
<div style={chartContainerStyle}>
262262
<h3 style={chartHeadingStyle}>Pie</h3>
263263
<VictoryPie
264+
theme={VictoryTheme.clean}
264265
style={{ labels: { fill: "white", fontSize: 10 } }}
265266
labelRadius={({ datum }) => datum.radius - 12}
266267
width={400}
@@ -279,9 +280,8 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
279280
{/** SCATTER */}
280281
<div style={chartContainerStyle}>
281282
<h3 style={chartHeadingStyle}>Scatter</h3>
282-
<VictoryChart domain={{ x: [0, 6], y: [0, 8] }}>
283+
<VictoryChart theme={VictoryTheme.clean} domain={{ x: [0, 6], y: [0, 8] }}>
283284
<VictoryScatter
284-
style={{ data: { fill: "#c43a31" } }}
285285
size={7}
286286
data={accessibilityScatterData}
287287
dataComponent={
@@ -299,9 +299,8 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
299299
{/** VORONOI */}
300300
<div style={chartContainerStyle}>
301301
<h3 style={chartHeadingStyle}>Voronoi</h3>
302-
<VictoryChart>
302+
<VictoryChart theme={VictoryTheme.clean} >
303303
<VictoryVoronoi
304-
style={{ data: { stroke: "#c43a31", strokeWidth: 2 } }}
305304
data={accessibilityVoronoiData}
306305
dataComponent={
307306
<Voronoi
@@ -318,7 +317,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
318317
{/** CANDLESTICK */}
319318
<div style={chartContainerStyle}>
320319
<h3 style={chartHeadingStyle}>Candlestick</h3>
321-
<VictoryChart domainPadding={{ x: 25 }}>
320+
<VictoryChart theme={VictoryTheme.clean} domainPadding={{ x: 25 }}>
322321
<VictoryCandlestick
323322
data={accessibilityCandlestickData}
324323
dataComponent={
@@ -336,7 +335,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
336335
{/** ERRORBAR */}
337336
<div style={chartContainerStyle}>
338337
<h3 style={chartHeadingStyle}>ErrorBar</h3>
339-
<VictoryChart domainPadding={15}>
338+
<VictoryChart theme={VictoryTheme.clean} domainPadding={15}>
340339
<VictoryErrorBar
341340
data={accessibilityErrorBarData}
342341
errorX={(datum) => datum.error * datum.x}
@@ -356,8 +355,9 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
356355
{/** ACCESSIBLE GROUP */}
357356
<div style={chartContainerStyle}>
358357
<h3 style={chartHeadingStyle}>Accessible Group</h3>
359-
<VictoryChart domainPadding={{ x: 40 }}>
358+
<VictoryChart theme={VictoryTheme.clean} domainPadding={{ x: 40 }}>
360359
<VictoryGroup
360+
theme={VictoryTheme.clean}
361361
offset={20}
362362
groupComponent={
363363
<VictoryAccessibleGroup
@@ -369,7 +369,6 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
369369
<VictoryBar horizontal data={accessibilityGroupData.a} />
370370
<VictoryBar
371371
horizontal
372-
style={{ data: { fill: "#c43a31", opacity: 0.9 } }}
373372
data={accessibilityGroupData.b}
374373
groupComponent={
375374
<VictoryAccessibleGroup

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,10 +115,10 @@ export default class App extends React.Component<any, any> {
115115
animate
116116
data={this.state.areaTransitionData}
117117
x={(d) => d.x}
118-
theme={VictoryTheme.material}
118+
theme={VictoryTheme.clean}
119119
/>
120120

121-
<VictoryChart style={style} animate theme={VictoryTheme.material}>
121+
<VictoryChart style={style} animate theme={VictoryTheme.clean}>
122122
<VictoryArea data={this.state.areaTransitionData} />
123123
</VictoryChart>
124124

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
CanvasGroup,
1414
CanvasPoint,
1515
} from "victory-canvas";
16+
import { VictoryTheme } from "victory-core/lib";
1617

1718
const populationData = [
1819
{
@@ -279,7 +280,7 @@ const CanvasDemo = () => {
279280

280281
return (
281282
<div className="demo" style={containerStyle}>
282-
<VictoryChart animate style={{ parent: parentStyle }}>
283+
<VictoryChart theme={VictoryTheme.clean} animate style={{ parent: parentStyle }}>
283284
{populationData.map(({ country, values }) => {
284285
const data = values.map(({ year, value }) => ({
285286
x: year,

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

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ 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";
1415

1516
const Charts = ({ behaviors }) => {
1617
const containerStyle: React.CSSProperties = {
@@ -112,6 +113,7 @@ const Charts = ({ behaviors }) => {
112113
</VictoryChart>
113114
{/* B */}
114115
<VictoryChart
116+
theme={VictoryTheme.clean}
115117
style={{ parent: chartStyle.parent }}
116118
containerComponent={
117119
<CustomContainer
@@ -140,6 +142,7 @@ const Charts = ({ behaviors }) => {
140142
</VictoryChart>
141143
{/* C */}
142144
<VictoryChart
145+
theme={VictoryTheme.clean}
143146
style={chartStyle}
144147
containerComponent={
145148
<CustomContainer selectedDomain={{ x: [0, 0] }} />
@@ -152,7 +155,18 @@ const Charts = ({ behaviors }) => {
152155
}}
153156
size={({ active }) => (active ? 5 : 3)}
154157
labels={({ datum }) => datum.y}
155-
labelComponent={<VictoryTooltip />}
158+
labelComponent={
159+
<VictoryTooltip
160+
pointerLength={4}
161+
flyoutPadding={{ top: 8, bottom: 8, left: 16, right: 16 }}
162+
cornerRadius={1}
163+
flyoutStyle={{
164+
stroke: "#757575",
165+
strokeWidth: 2,
166+
fill: "white",
167+
}}
168+
/>
169+
}
156170
data={[
157171
{ x: 1, y: -5 },
158172
{ x: 2, y: 4 },
@@ -169,7 +183,18 @@ const Charts = ({ behaviors }) => {
169183
}}
170184
size={({ active }) => (active ? 5 : 3)}
171185
labels={({ datum }) => datum.y}
172-
labelComponent={<VictoryTooltip />}
186+
labelComponent={
187+
<VictoryTooltip
188+
pointerLength={4}
189+
flyoutPadding={{ top: 8, bottom: 8, left: 16, right: 16 }}
190+
cornerRadius={1}
191+
flyoutStyle={{
192+
stroke: "#757575",
193+
strokeWidth: 2,
194+
fill: "white",
195+
}}
196+
/>
197+
}
173198
data={[
174199
{ x: 1, y: -3 },
175200
{ x: 2, y: 5 },
@@ -191,7 +216,18 @@ const Charts = ({ behaviors }) => {
191216
{ x: 7, y: -3 },
192217
]}
193218
labels={({ datum }) => datum.y}
194-
labelComponent={<VictoryTooltip />}
219+
labelComponent={
220+
<VictoryTooltip
221+
pointerLength={4}
222+
flyoutPadding={{ top: 8, bottom: 8, left: 16, right: 16 }}
223+
cornerRadius={1}
224+
flyoutStyle={{
225+
stroke: "#757575",
226+
strokeWidth: 2,
227+
fill: "white",
228+
}}
229+
/>
230+
}
195231
size={({ active }) => (active ? 5 : 3)}
196232
/>
197233
</VictoryGroup>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
VictoryClipContainer,
1212
Point,
1313
Selection,
14+
VictoryTheme,
1415
} from "victory-core";
1516
import { VictoryZoomContainer } from "victory-zoom-container";
1617
import { VictoryBrushContainer } from "victory-brush-container";
@@ -163,6 +164,7 @@ class App extends React.Component<any, DraggableDemoInterface> {
163164
return (
164165
<div style={containerStyle}>
165166
<VictoryChart
167+
theme={VictoryTheme.clean}
166168
horizontal
167169
{...sharedProps}
168170
height={400}
@@ -228,6 +230,7 @@ class App extends React.Component<any, DraggableDemoInterface> {
228230
/>
229231
</VictoryChart>
230232
<VictoryChart
233+
theme={VictoryTheme.clean}
231234
horizontal
232235
{...sharedProps}
233236
padding={{ top: 30, left: 50, right: 30, bottom: 0 }}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ class EventsDemo extends React.Component {
2626
<div className="demo">
2727
<div style={containerStyle}>
2828
<VictoryBar
29+
theme={VictoryTheme.clean}
2930
style={{
3031
parent: chartStyle.parent,
3132
data: { fill: "blue", width: 20 },
@@ -152,6 +153,7 @@ class EventsDemo extends React.Component {
152153
</VictoryChart>
153154

154155
<VictoryChart
156+
theme={VictoryTheme.clean}
155157
style={chartStyle}
156158
events={[
157159
{
@@ -188,7 +190,7 @@ class EventsDemo extends React.Component {
188190
},
189191
]}
190192
>
191-
<VictoryLabel text="Parent Events" y={50} x={150} />
193+
<VictoryLabel text="Parent Events" y={50} x={150} style={{...VictoryTheme.clean.label, fontSize: 18 }} />
192194
<VictoryBar name="bar" labels={() => null} />
193195
</VictoryChart>
194196

‎demo/ts/components/external-events-demo.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { VictoryLine } from "victory-line";
99
import { VictoryZoomContainer } from "victory-zoom-container";
1010
import { VictoryVoronoiContainer } from "victory-voronoi-container";
1111
import { range } from "lodash";
12+
import { VictoryTheme } from "victory-core/lib";
1213

1314
class App extends React.Component<any, any> {
1415
constructor(props) {
@@ -105,6 +106,7 @@ class App extends React.Component<any, any> {
105106
</li>
106107
</ul>
107108
<VictoryChart
109+
theme={VictoryTheme.clean}
108110
style={chartStyle}
109111
domainPadding={{ x: 40 }}
110112
animate
@@ -139,7 +141,7 @@ class App extends React.Component<any, any> {
139141
name="data"
140142
labels={() => null}
141143
data={this.state.data}
142-
style={{ data: { fill: "cyan" } }}
144+
// style={{ data: { fill: "cyan" } }}
143145
/>
144146
</VictoryChart>
145147

@@ -228,6 +230,7 @@ class App extends React.Component<any, any> {
228230
</VictoryStack>
229231
</VictoryChart>
230232
<VictoryStack
233+
theme={VictoryTheme.clean}
231234
style={chartStyle}
232235
externalEventMutations={this.state.externalMutation}
233236
containerComponent={<VictoryVoronoiContainer />}
@@ -241,7 +244,8 @@ class App extends React.Component<any, any> {
241244
strokeWidth: 2,
242245
},
243246
}}
244-
barWidth={({ active }) => (active ? 5 : 3)}
247+
cornerRadius={{ top: 1, bottom: 1 }}
248+
barWidth={({ active }) => (active ? 7 : 4)}
245249
data={[
246250
{ x: 1, y: -5 },
247251
{ x: 2, y: 4 },
@@ -260,7 +264,8 @@ class App extends React.Component<any, any> {
260264
strokeWidth: 2,
261265
},
262266
}}
263-
barWidth={({ active }) => (active ? 5 : 3)}
267+
cornerRadius={{ top: 1, bottom: 1 }}
268+
barWidth={({ active }) => (active ? 7 : 4)}
264269
data={[
265270
{ x: 1, y: -3 },
266271
{ x: 2, y: 5 },

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { VictoryTooltip } from "victory-tooltip";
1111
import { VictoryVoronoi } from "victory-voronoi";
1212
import { VictoryBoxPlot } from "victory-box-plot";
1313
import { range, random } from "lodash";
14+
import { VictoryTheme } from "victory-core/lib";
1415

1516
class App extends React.Component {
1617
getGroupData() {
@@ -57,7 +58,11 @@ class App extends React.Component {
5758
return (
5859
<div className="demo">
5960
<div style={containerStyle}>
60-
<VictoryChart style={chartStyle} domainPadding={20}>
61+
<VictoryChart
62+
theme={VictoryTheme.clean}
63+
style={chartStyle}
64+
domainPadding={20}
65+
>
6166
<VictoryStack
6267
style={{
6368
data: { strokeDasharray: "10, 5" },

0 commit comments

Comments
 (0)