Skip to content

Commit fbd1c61

Browse files
niklavsBarissniklavsBariss
committed
Cleanup
1 parent 12a9294 commit fbd1c61

3 files changed

Lines changed: 106 additions & 98 deletions

File tree

‎example/src/App.tsx‎

Lines changed: 12 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,13 @@ import Chart, {
77
type ErrorSegment,
88
} from 'react-native-d3-chart'
99

10-
import { buildSlices } from './helpers/buildSlices'
11-
import { generateTimeSeriesData } from './helpers/generateTimeSeriesData'
12-
import { temperatureData, visits } from './mockData'
10+
import { measurementsRecords, Measurement } from './data'
1311
import type { HighlightPayload } from '../../src/types'
1412

1513
type TimeDomainType = 'hour' | 'day' | 'week' | 'month'
1614

1715
const TIME_DOMAIN_TYPES: TimeDomainType[] = ['hour', 'day', 'week', 'month']
16+
const MEASUREMENT_KEYS = Object.values(Measurement)
1817

1918
const chartColors: ChartProps['colors'] = {
2019
background: '#fff',
@@ -25,95 +24,6 @@ const chartColors: ChartProps['colors'] = {
2524
highlightTime: '#444',
2625
}
2726

28-
enum Measurement {
29-
Temperature = 'Temperature',
30-
Blue = 'Blue',
31-
Green = 'Green',
32-
Pink = 'Pink',
33-
Visits = 'Visits',
34-
VisitRate = 'Visit Rate',
35-
}
36-
37-
const measurementKeys = Object.values(Measurement)
38-
const measurementsRecords: Record<Measurement, Dataset> = {
39-
[Measurement.Temperature]: {
40-
unit: '°C',
41-
points: temperatureData,
42-
decimals: 0,
43-
areaColor: '#c4deff',
44-
color: {
45-
type: 'thresholds',
46-
baseColor: '#3d91ff',
47-
gradientBlur: 2,
48-
thresholds: [
49-
{ value: 32, color: '#bb2222' },
50-
{ value: 24, color: '#ffc400' },
51-
{ value: 16, color: '#089851' },
52-
{ value: 10, color: '#9ceeff' },
53-
{ value: 0, color: '#00d5ff' },
54-
],
55-
},
56-
measurementName: Measurement.Temperature,
57-
},
58-
[Measurement.Blue]: {
59-
unit: 'l',
60-
points: generateTimeSeriesData({
61-
startingValue: 160,
62-
minimum: 50,
63-
radomFactor: 6,
64-
}),
65-
decimals: 0,
66-
color: '#66e',
67-
measurementName: Measurement.Blue,
68-
},
69-
[Measurement.Green]: {
70-
unit: 'kg',
71-
points: generateTimeSeriesData(),
72-
decimals: 0,
73-
color: '#6e6',
74-
measurementName: Measurement.Green,
75-
},
76-
[Measurement.Pink]: {
77-
unit: 'm/s',
78-
points: generateTimeSeriesData({
79-
startingValue: 20,
80-
minimum: 100,
81-
}),
82-
decimals: 1,
83-
color: '#e0e',
84-
measurementName: Measurement.Pink,
85-
},
86-
87-
[Measurement.VisitRate]: {
88-
unit: 'visits/h',
89-
points: visits.movingAveregeData,
90-
slices: buildSlices('horizontal', {
91-
end: visits.latestTimestamp,
92-
start: visits.oldestTimestamp,
93-
yellowThreshold: visits.averageVisitRatePerHour,
94-
redThreshold: visits.averageVisitRatePerHour * 1.1,
95-
}),
96-
decimals: 0,
97-
color: '#000',
98-
areaColor: null,
99-
measurementName: Measurement.VisitRate,
100-
},
101-
[Measurement.Visits]: {
102-
unit: 'pulses',
103-
points: visits.culmulativeData,
104-
decimals: 0,
105-
color: '#000',
106-
areaColor: null,
107-
measurementName: 'Visits cumulative',
108-
slices: buildSlices('axial', {
109-
end: visits.latestTimestamp,
110-
start: visits.oldestTimestamp,
111-
yellowThreshold: visits.averageVisitRatePerHour,
112-
redThreshold: visits.averageVisitRatePerHour * 1.1,
113-
}),
114-
},
115-
}
116-
11727
export default function App() {
11828
const [width, setWidth] = useState<number>(0)
11929
const height = width * 1.1
@@ -194,6 +104,11 @@ export default function App() {
194104
[enabledMeasurements, errorSegments]
195105
)
196106

107+
const xDividerConfig = useMemo<ChartProps['xDividerConfig']>(
108+
() => ({ type: 'segment', color: '#F2F2FF' }),
109+
[]
110+
)
111+
197112
return (
198113
<View
199114
style={styles.holder}
@@ -223,9 +138,9 @@ export default function App() {
223138
timeDomain={timeDomain}
224139
marginHorizontal={PADDING}
225140
errorSegments={errorSegments}
141+
xDividerConfig={xDividerConfig}
226142
noDataString="No data available"
227143
highlightValuePosition={highlightValuePosition}
228-
xDividerConfig={{ type: 'segment', color: '#F2F2FF' }}
229144
onHighlightChanged={setCurrentHighlight}
230145
/>
231146
<View style={styles.spacer} />
@@ -257,7 +172,7 @@ export default function App() {
257172
))}
258173
</View>
259174
{/* Measurement toggles */}
260-
{measurementKeys.map((measurement) => (
175+
{MEASUREMENT_KEYS.map((measurement) => (
261176
<View key={measurement} style={styles.switchContainer}>
262177
<Switch
263178
value={enabledMeasurements.includes(measurement)}
@@ -272,11 +187,11 @@ export default function App() {
272187
return prev.filter((m) => m !== measurement)
273188

274189
// only one measurement was enabled, switch to next one
275-
const currentIndex = measurementKeys.findIndex(
190+
const currentIndex = MEASUREMENT_KEYS.findIndex(
276191
(m) => m === measurement
277192
)
278-
const nextIndex = (currentIndex + 1) % measurementKeys.length
279-
const nextMeasurement = measurementKeys[nextIndex]!
193+
const nextIndex = (currentIndex + 1) % MEASUREMENT_KEYS.length
194+
const nextMeasurement = MEASUREMENT_KEYS[nextIndex]!
280195

281196
return [nextMeasurement]
282197
})

‎example/src/data.ts‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import { type Dataset } from 'react-native-d3-chart'
2+
3+
import { buildSlices } from './helpers/buildSlices'
4+
import { generateTimeSeriesData } from './helpers/generateTimeSeriesData'
5+
import { temperatureData, visits } from './mockData'
6+
7+
export enum Measurement {
8+
Temperature = 'Temperature',
9+
Blue = 'Blue',
10+
Green = 'Green',
11+
Pink = 'Pink',
12+
Visits = 'Visits',
13+
VisitRate = 'Visit Rate',
14+
}
15+
export const measurementsRecords: Record<Measurement, Dataset> = {
16+
[Measurement.Temperature]: {
17+
unit: '°C',
18+
points: temperatureData,
19+
decimals: 0,
20+
areaColor: '#c4deff',
21+
color: {
22+
type: 'thresholds',
23+
baseColor: '#3d91ff',
24+
gradientBlur: 2,
25+
thresholds: [
26+
{ value: 32, color: '#bb2222' },
27+
{ value: 24, color: '#ffc400' },
28+
{ value: 16, color: '#089851' },
29+
{ value: 10, color: '#9ceeff' },
30+
{ value: 0, color: '#00d5ff' },
31+
],
32+
},
33+
measurementName: Measurement.Temperature,
34+
},
35+
[Measurement.Blue]: {
36+
unit: 'l',
37+
points: generateTimeSeriesData({
38+
startingValue: 160,
39+
minimum: 50,
40+
radomFactor: 6,
41+
}),
42+
decimals: 0,
43+
color: '#66e',
44+
measurementName: Measurement.Blue,
45+
},
46+
[Measurement.Green]: {
47+
unit: 'kg',
48+
points: generateTimeSeriesData(),
49+
decimals: 0,
50+
color: '#6e6',
51+
measurementName: Measurement.Green,
52+
},
53+
[Measurement.Pink]: {
54+
unit: 'm/s',
55+
points: generateTimeSeriesData({
56+
startingValue: 20,
57+
minimum: 100,
58+
}),
59+
decimals: 1,
60+
color: '#e0e',
61+
measurementName: Measurement.Pink,
62+
},
63+
64+
[Measurement.VisitRate]: {
65+
unit: 'visits/h',
66+
points: visits.movingAveregeData,
67+
slices: buildSlices('horizontal', {
68+
end: visits.latestTimestamp,
69+
start: visits.oldestTimestamp,
70+
yellowThreshold: visits.averageVisitRatePerHour,
71+
redThreshold: visits.averageVisitRatePerHour * 1.1,
72+
}),
73+
decimals: 0,
74+
color: '#000',
75+
areaColor: null,
76+
measurementName: Measurement.VisitRate,
77+
},
78+
[Measurement.Visits]: {
79+
unit: 'pulses',
80+
points: visits.culmulativeData,
81+
decimals: 0,
82+
color: '#000',
83+
areaColor: null,
84+
measurementName: 'Visits cumulative',
85+
slices: buildSlices('axial', {
86+
end: visits.latestTimestamp,
87+
start: visits.oldestTimestamp,
88+
yellowThreshold: visits.averageVisitRatePerHour,
89+
redThreshold: visits.averageVisitRatePerHour * 1.1,
90+
}),
91+
},
92+
}

‎src/drawFunction.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1042,7 +1042,8 @@ window.draw = (props) => {
10421042
.select('span#highlightvalue' + index)
10431043
.style('color', color)
10441044
.html(
1045-
errorMessage ?? d3.format('.' + decimals + 'f')(highlight.value) + ' ' + unit
1045+
errorMessage ??
1046+
d3.format('.' + decimals + 'f')(highlight.value) + ' ' + unit
10461047
)
10471048
})
10481049

0 commit comments

Comments
 (0)