Skip to content

Commit c9f6dce

Browse files
author
Adrian Hurtado
committed
WIP (with reactivity bug)
1 parent 7198fe1 commit c9f6dce

21 files changed

+537
-194
lines changed

‎demo/sections/Cartesian.vue

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,22 @@
2424
/>
2525
<WLine
2626
yAxisId="time"
27-
:yDatakey="yDatakey"
28-
color="#f55"
27+
yDatakey="time"
28+
:styles="{
29+
line: {
30+
stroke: '#f55'
31+
},
32+
}"
33+
/>
34+
<WLine
35+
v-if="showLine"
36+
yAxisId="time"
37+
yDatakey="performance"
38+
:styles="{
39+
line: {
40+
stroke: '#55f'
41+
},
42+
}"
2943
/>
3044
</WChart>
3145

@@ -50,31 +64,37 @@ export default {
5064
},
5165
data () {
5266
return {
53-
dataset: [
54-
{ lap: 'LAP 1', seatTime: 37, chevroletTime: 32 },
55-
{ lap: 'LAP 2', seatTime: 38, chevroletTime: 33 },
56-
{ lap: 'LAP 3', seatTime: 36, chevroletTime: 31 },
57-
{ lap: 'LAP 4', seatTime: 39, chevroletTime: 32 },
58-
{ lap: 'LAP 5', seatTime: 37, chevroletTime: 33 },
59-
],
67+
dataset: this.randomDataset(),
6068
xAxisPosition: 'bottom',
6169
yAxisPosition: 'left',
62-
yDatakey: 'seatTime',
70+
yDatakey: 'time',
6371
chartPadding: [20, 30, 40, 50],
72+
showLine: false,
6473
}
6574
},
6675
methods: {
6776
change () {
77+
this.dataset = this.randomDataset()
6878
// this.xAxisPosition = this.xAxisPosition === 'top' ? 'bottom' : 'top'
6979
// this.yAxisPosition = this.yAxisPosition === 'left' ? 'right' : 'left'
70-
this.yDatakey = this.yDatakey === 'seatTime' ? 'chevroletTime' : 'seatTime'
80+
this.showLine = true
7181
},
7282
yTickFormatter (value) {
7383
if (typeof value === 'number') {
7484
return value.toFixed(2)
7585
}
7686
return value
7787
},
88+
randomDataset () {
89+
const nearTo = (x, delta) => Math.round(x - delta + 2 * delta * Math.random())
90+
return [
91+
{ lap: 'LAP 1', time: nearTo(37, 3), performance: nearTo(90, 5) },
92+
{ lap: 'LAP 2', time: nearTo(38, 3), performance: nearTo(87, 5) },
93+
{ lap: 'LAP 3', time: nearTo(36, 3), performance: nearTo(86, 5) },
94+
{ lap: 'LAP 4', time: nearTo(39, 3), performance: nearTo(80, 5) },
95+
{ lap: 'LAP 5', time: nearTo(37, 3), performance: nearTo(72, 5) },
96+
]
97+
},
7898
},
7999
}
80100
</script>

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,9 @@
3838
"dependencies": {
3939
"d3-array": "^2.2.0",
4040
"d3-scale": "d3/d3-scale",
41+
"d3-selection": "^1.4.1",
4142
"d3-shape": "^1.3.5",
43+
"d3-transition": "^1.3.2",
4244
"gsap": "^2.1.3",
4345
"lodash.debounce": "^4.0.8",
4446
"lodash.merge": "^4.6.2",

‎src/charts/WChart.vue

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,6 @@ export default {
3333
return normalizedMargin(this.padding)
3434
},
3535
},
36-
methods: {
37-
getDatasetForSeries (series) {
38-
return series ? this.dataset[series] : this.dataset
39-
},
40-
},
4136
4237
render (h) {
4338
const {

‎src/charts/chartAxisMixin.js

Lines changed: 153 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,22 @@ export default {
88
return {
99
/**
1010
* Axes stores all the relevant information for each axis
11-
* @property {Object.<string, Object>} axisDefs map { [axisId]: axisDefData, ... }
11+
* @property {Object.<string, Object>} axisDefinitions map { [axisId]: axisDefData, ... }
1212
* @property {string} axisDefData.dimension "x", "y", "z", "angle", "radius".
1313
* @property {string} axisDefData.type "numeric", "categorical".
1414
* @property {string|string[]} axisDefData.datakey optional datakey or array of datakeys.
1515
* @property {Object.<string, string>} axisDefData.datakeys a "map" of element's "uid" and their "datakeys".
1616
* It must be a "map" to register who is requiring a datakey. It could be more than one element.
1717
*/
18-
axisDefs: {},
18+
axisDefinitions: {},
1919

20-
axisDataDomains: {},
20+
axisDatakeys: {},
21+
22+
axisDataDomainsByElement: {},
2123

2224
/**
2325
* Axes stores all the relevant information for each axis
24-
* @property {Object.<string, Object>} axes map { [axisId]: axisData, ... }
26+
* @property {Object.<string, Object>} axisInformations map { [axisId]: axisData, ... }
2527
* @property {string} axisData.dimension "x", "y", "z", "angle", "radius".
2628
* @property {string} axisData.type "numeric", "categorical".
2729
* @property {string|string[]} axisData.datakey optional datakey or array of datakeys.
@@ -31,9 +33,28 @@ export default {
3133
* @property {function} axisData.scale
3234
* @property {number[]} axisData.ticks
3335
*/
34-
axes: {},
36+
// axisInformations: {},
37+
axisDomains: {},
38+
axisBounds: {},
39+
axisScales: {},
40+
axisTicks: {},
3541
}
3642
},
43+
computed: {
44+
// axes () {
45+
// const { axisDefinitions, axisInformations } = this
46+
// return Object.keys(axisDefinitions).reduce(
47+
// (acc, axisId) => ({
48+
// ...acc,
49+
// [axisId]: {
50+
// ...axisDefinitions[axisId],
51+
// ...axisInformations[axisId],
52+
// },
53+
// }),
54+
// {}
55+
// )
56+
// },
57+
},
3758
methods: {
3859
/**
3960
* Function that registers the axes relevant information.
@@ -45,41 +66,60 @@ export default {
4566
* @param {string} [obj.series] optional series.
4667
* @param {string} [obj.datakey] optional datakey.
4768
*/
48-
registerAxis (id, {
69+
registerAxisDefinition (id, {
4970
dimension,
5071
type,
5172
series,
5273
datakey,
5374
}) {
54-
const { axisDefs } = this
55-
const newAxisDefs = {
56-
...axisDefs,
75+
debugger
76+
const { axisDefinitions } = this
77+
const newAxisDefinitions = {
78+
...axisDefinitions,
5779
[id]: {
5880
dimension,
5981
type,
82+
series,
6083
datakey,
61-
datakeys: {},
6284
},
6385
}
6486
if (datakey) {
65-
newAxisDefs[id].datakeys[id] = { series, datakey }
87+
this.registerAxisDatakey(id, { axisId: id, series, datakey })
6688
}
67-
this.axisDefs = newAxisDefs
89+
this.axisDefinitions = newAxisDefinitions
90+
// this.axisDefinitions[id] = {
91+
// dimension,
92+
// type,
93+
// series,
94+
// datakey,
95+
// }
6896
},
6997

7098
/**
7199
* Function that unregisters the axes relevant information.
72100
* @param {string} id identifier for the axis.
73101
*/
74102
unregisterAxis (id) {
75-
this.axisDefs = omit(this.axisDefs, id)
103+
// delete this.axisDefinitions[id]
104+
// delete this.axisDatakeys[id]
105+
// delete this.axisDomains[id]
106+
// delete this.axisBounds[id]
107+
// delete this.axisScales[id]
108+
// delete this.axisTicks[id]
109+
this.axisDefinitions = omit(this.axisDefinitions, id)
110+
this.axisDatakeys = omit(this.axisDatakeys, id)
111+
// this.axisInformations = omit(this.axisInformations, id)
112+
this.axisDomains = omit(this.axisDomains, id)
113+
this.axisBounds = omit(this.axisBounds, id)
114+
this.axisScales = omit(this.axisScales, id)
115+
this.axisTicks = omit(this.axisTicks, id)
76116
},
77117

78118
/**
79119
* Function that registers a datakey for a specific axis.
80120
* @param {string} uid unique identifier for the component.
81121
* @param {Object} obj object with parameters.
82-
* @param {string} [obj.axisId] identifier for the axis.
122+
* @param {string} obj.axisId identifier for the axis.
83123
* @param {string} obj.series series key if needed.
84124
* @param {string} obj.datakey datakey. It can be namespaced by a series "{series}:{datakey}"
85125
*/
@@ -88,24 +128,28 @@ export default {
88128
series,
89129
datakey,
90130
}) {
91-
const { axisDefs } = this
131+
debugger
132+
const { axisDatakeys } = this
92133
if (series || datakey) {
93134
if (uid && axisId) {
94-
const axisData = axisDefs[axisId] || {}
95-
const newAxisDefs = {
96-
...axisDefs,
135+
const newAxisDatakeys = {
136+
...axisDatakeys,
97137
[axisId]: {
98-
...axisData,
99-
datakeys: {
100-
...(axisData.datakeys || {}),
101-
[uid]: {
102-
series,
103-
datakey,
104-
},
138+
...(axisDatakeys[axisId] || {}),
139+
[uid]: {
140+
series,
141+
datakey,
105142
},
106143
},
107144
}
108-
this.axisDefs = newAxisDefs
145+
this.axisDatakeys = newAxisDatakeys
146+
// this.axisDatakeys[axisId] = {
147+
// ...(axisDatakeys[axisId] || {}),
148+
// [uid]: {
149+
// series,
150+
// datakey,
151+
// },
152+
// }
109153
} else {
110154
console.warn('chart.registerAxisDatakey: there is no "uid" or "axisId"')
111155
}
@@ -117,38 +161,99 @@ export default {
117161
* @param {string} uid unique identifier for the component.
118162
*/
119163
unregisterAxisDatakey (uid) {
120-
const { axisDefs } = this
121-
this.axisDefs = Object.keys(axisDefs).reduce(
164+
const { axisDatakeys } = this
165+
this.axisDatakeys = Object.keys(axisDatakeys).reduce(
122166
(acc, axisId) => ({
123167
...acc,
124-
[axisId]: {
125-
...axisDefs[axisId],
126-
datakeys: omit(axisDefs[axisId].datakeys || {}, uid),
127-
},
168+
[axisId]: omit(axisDatakeys[axisId] || {}, uid),
128169
}),
129170
{}
130171
)
131172
},
132173

133-
setAxisData (id, {
174+
/**
175+
* Function that registers a datakey for a specific axis.
176+
* @param {string} uid unique identifier for the component.
177+
* @param {Object} obj object with parameters.
178+
* @param {string} obj.axisId identifier for the axis.
179+
* @param {string} obj.domain domain
180+
*/
181+
registerAxisDataDomain (uid, {
182+
axisId,
134183
domain,
135-
bounds,
136-
scale,
137-
ticks,
138184
}) {
139-
const { axisDefs, axes } = this
140-
const newAxes = {
141-
...axes,
142-
[id]: {
143-
...(axisDefs[id] || {}),
144-
...(axes[id] || {}),
145-
domain,
146-
bounds,
147-
scale,
148-
ticks,
149-
},
185+
debugger
186+
const { axisDataDomainsByElement } = this
187+
if (uid && axisId) {
188+
const newAxisDataDomainsByElement = {
189+
...axisDataDomainsByElement,
190+
[axisId]: {
191+
...(axisDataDomainsByElement[axisId] || {}),
192+
[uid]: domain,
193+
},
194+
}
195+
this.axisDataDomainsByElement = newAxisDataDomainsByElement
196+
// this.axisDataDomainsByElement[axisId] = {
197+
// ...(axisDataDomainsByElement[axisId] || {}),
198+
// [uid]: domain,
199+
// }
200+
} else {
201+
console.warn('chart.registerAxisDataDomain: there is no "uid" or "axisId"')
150202
}
151-
this.axes = newAxes
152203
},
204+
205+
/**
206+
* Function that unregisters a datakey for a specific axis.
207+
* @param {string} uid unique identifier for the component.
208+
*/
209+
unregisterAxisDataDomain (uid) {
210+
const { axisDataDomainsByElement } = this
211+
this.axisDataDomainsByElement = Object.keys(axisDataDomainsByElement).reduce(
212+
(acc, axisId) => ({
213+
...acc,
214+
[axisId]: omit(axisDataDomainsByElement[axisId] || {}, uid),
215+
}),
216+
{}
217+
)
218+
},
219+
220+
setAxisDomain (id, domain) {
221+
debugger
222+
this.axisDomains = { ...this.axisDomains, [id]: domain }
223+
// this.axisDomains[id] = domain
224+
},
225+
setAxisBound (id, bound) {
226+
debugger
227+
this.axisBounds = { ...this.axisBounds, [id]: bound }
228+
// this.axisBounds[id] = bound
229+
},
230+
setAxisScale (id, scale) {
231+
debugger
232+
this.axisScales = { ...this.axisScales, [id]: scale }
233+
// this.axisScales[id] = scale
234+
},
235+
setAxisTicks (id, ticks) {
236+
debugger
237+
this.axisTicks = { ...this.axisTicks, [id]: ticks }
238+
// this.axisTicks[id] = ticks
239+
},
240+
// setAxisInformation (id, {
241+
// domain,
242+
// bounds,
243+
// scale,
244+
// ticks,
245+
// }) {
246+
// debugger
247+
// const {
248+
// axisDomains,
249+
// axisBounds,
250+
// axisScales,
251+
// axisTicks,
252+
// } = this
253+
// this.axisDomains = { ...axisDomains, [id]: domain }
254+
// this.axisBounds = { ...axisBounds, [id]: bounds }
255+
// this.axisScales = { ...axisScales, [id]: scale }
256+
// this.axisTicks = { ...axisTicks, [id]: ticks }
257+
// },
153258
},
154259
}

‎src/charts/chartUtils.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ export function generateUid (options, props) {
1515
return [type, name, id].filter(x => x)./* concat(random). */join('-')
1616
}
1717

18+
export function getDatums ({ dataset, series }) {
19+
return series ? dataset[series] : dataset
20+
}
21+
1822
export const marginVueType = VueTypes.oneOfType([
1923
VueTypes.number,
2024
VueTypes.arrayOf(VueTypes.number),

0 commit comments

Comments
 (0)