Skip to content

Commit efcb2c1

Browse files
Andy LeeMatthew Hooper
Andy Lee
authored and
Matthew Hooper
committed
Removed old SVG X/Y chart and replace with the Canvas one (#88)
* Removed old SVG X/Y chart and replace with the Canvas one * Remove old pointSeries
1 parent 4b1a07a commit efcb2c1

File tree

7 files changed

+157
-275
lines changed

7 files changed

+157
-275
lines changed

‎packages/perspective-viewer-d3fc/src/js/charts/charts.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,8 @@ import lineChart from "./line";
1313
import areaChart from "./area";
1414
import yScatter from "./y-scatter";
1515
import xyScatter from "./xy-scatter";
16-
import xyScatterCanvas from "./xy-scatter-canvas";
1716
import heatmap from "./heatmap";
1817

19-
const chartClasses = [barChart, columnChart, lineChart, areaChart, yScatter, xyScatter, xyScatterCanvas, heatmap];
18+
const chartClasses = [barChart, columnChart, lineChart, areaChart, yScatter, xyScatter, heatmap];
2019

2120
export default chartClasses;

‎packages/perspective-viewer-d3fc/src/js/charts/xy-scatter-canvas.js‎

Lines changed: 0 additions & 99 deletions
This file was deleted.

‎packages/perspective-viewer-d3fc/src/js/charts/xy-scatter.js‎

Lines changed: 98 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,98 @@
1-
/******************************************************************************
2-
*
3-
* Copyright (c) 2017, the Perspective Authors.
4-
*
5-
* This file is part of the Perspective library, distributed under the terms of
6-
* the Apache License 2.0. The full license can be found in the LICENSE file.
7-
*
8-
*/
9-
import * as fc from "d3fc";
10-
import * as mainAxis from "../axis/mainAxis";
11-
import {pointSeries, symbolTypeFromGroups} from "../series/pointSeries";
12-
import {pointData} from "../data/pointData";
13-
import {seriesColoursFromGroups} from "../series/seriesColours";
14-
import {seriesLinearRange, seriesColourRange} from "../series/seriesRange";
15-
import {symbolLegend} from "../legend/legend";
16-
import {colourRangeLegend} from "../legend/colourRangeLegend";
17-
import {filterDataByGroup} from "../legend/filter";
18-
import {withGridLines} from "../gridlines/gridlines";
19-
import {hardLimitZeroPadding} from "../d3fc/padding/hardLimitZero";
20-
import zoomableChart from "../zoom/zoomableChart";
21-
22-
function xyScatter(container, settings) {
23-
const data = pointData(settings, filterDataByGroup(settings));
24-
const symbols = symbolTypeFromGroups(settings);
25-
const useGroupColours = settings.mainValues.length <= 2;
26-
let colour = null;
27-
let legend = null;
28-
29-
if (useGroupColours) {
30-
colour = seriesColoursFromGroups(settings);
31-
32-
legend = symbolLegend()
33-
.settings(settings)
34-
.scale(symbols)
35-
.colour(useGroupColours ? colour : null);
36-
} else {
37-
colour = seriesColourRange(settings, data, "colorValue");
38-
legend = colourRangeLegend().scale(colour);
39-
}
40-
41-
const size = settings.mainValues.length > 3 ? seriesLinearRange(settings, data, "size").range([10, 10000]) : null;
42-
43-
const series = fc
44-
.seriesSvgMulti()
45-
.mapping((data, index) => data[index])
46-
.series(data.map(series => pointSeries(settings, series.key, size, colour, symbols)));
47-
48-
const domainDefault = () => mainAxis.domain(settings).paddingStrategy(hardLimitZeroPadding().pad([0.1, 0.1]));
49-
50-
const xScale = mainAxis.scale(settings);
51-
const yScale = mainAxis.scale(settings);
52-
53-
const chart = fc
54-
.chartSvgCartesian(xScale, yScale)
55-
.xDomain(domainDefault().valueName("x")(data))
56-
.xLabel(settings.mainValues[0].name)
57-
.yDomain(domainDefault().valueName("y")(data))
58-
.yLabel(settings.mainValues[1].name)
59-
.yOrient("left")
60-
.yNice()
61-
.xNice()
62-
.plotArea(withGridLines(series));
63-
64-
const zoomChart = zoomableChart()
65-
.chart(chart)
66-
.settings(settings)
67-
.xScale(xScale)
68-
.yScale(yScale);
69-
70-
// render
71-
container.datum(data).call(zoomChart);
72-
if (legend) container.call(legend);
73-
}
74-
xyScatter.plugin = {
75-
type: "d3_xy_scatter",
76-
name: "[d3fc] X/Y Scatter",
77-
max_size: 25000,
78-
initial: {
79-
type: "number",
80-
count: 2
81-
}
82-
};
83-
84-
export default xyScatter;
1+
/******************************************************************************
2+
*
3+
* Copyright (c) 2017, the Perspective Authors.
4+
*
5+
* This file is part of the Perspective library, distributed under the terms of
6+
* the Apache License 2.0. The full license can be found in the LICENSE file.
7+
*
8+
*/
9+
import * as fc from "d3fc";
10+
import * as mainAxis from "../axis/mainAxis";
11+
import {pointSeriesCanvas, symbolTypeFromGroups} from "../series/pointSeriesCanvas";
12+
import {pointData} from "../data/pointData";
13+
import {seriesColoursFromGroups} from "../series/seriesColours";
14+
import {seriesLinearRange, seriesColourRange} from "../series/seriesRange";
15+
import {symbolLegend} from "../legend/legend";
16+
import {colourRangeLegend} from "../legend/colourRangeLegend";
17+
import {filterDataByGroup} from "../legend/filter";
18+
import {withCanvasGridLines} from "../gridlines/gridlines";
19+
import {hardLimitZeroPadding} from "../d3fc/padding/hardLimitZero";
20+
import zoomableChart from "../zoom/zoomableChart";
21+
import nearbyTip from "../tooltip/nearbyTip";
22+
23+
function xyScatter(container, settings) {
24+
const data = pointData(settings, filterDataByGroup(settings));
25+
const symbols = symbolTypeFromGroups(settings);
26+
const useGroupColours = settings.mainValues.length <= 2;
27+
let colour = null;
28+
let legend = null;
29+
30+
if (useGroupColours) {
31+
colour = seriesColoursFromGroups(settings);
32+
33+
legend = symbolLegend()
34+
.settings(settings)
35+
.scale(symbols)
36+
.colour(useGroupColours ? colour : null);
37+
} else {
38+
colour = seriesColourRange(settings, data, "colorValue");
39+
legend = colourRangeLegend().scale(colour);
40+
}
41+
42+
const size = settings.mainValues.length > 3 ? seriesLinearRange(settings, data, "size").range([10, 10000]) : null;
43+
44+
const series = fc
45+
.seriesCanvasMulti()
46+
.mapping((data, index) => data[index])
47+
.series(data.map(series => pointSeriesCanvas(settings, series.key, size, colour, symbols)));
48+
49+
const domainDefault = () => mainAxis.domain(settings).paddingStrategy(hardLimitZeroPadding().pad([0.1, 0.1]));
50+
51+
const xScale = mainAxis.scale(settings);
52+
const yScale = mainAxis.scale(settings);
53+
54+
const chart = fc
55+
.chartCanvasCartesian(xScale, yScale)
56+
.xDomain(domainDefault().valueName("x")(data))
57+
.xLabel(settings.mainValues[0].name)
58+
.yDomain(domainDefault().valueName("y")(data))
59+
.yLabel(settings.mainValues[1].name)
60+
.yOrient("left")
61+
.yNice()
62+
.xNice()
63+
.plotArea(withCanvasGridLines(series));
64+
65+
const zoomChart = zoomableChart()
66+
.chart(chart)
67+
.settings(settings)
68+
.xScale(xScale)
69+
.yScale(yScale)
70+
.canvas(true);
71+
72+
const toolTip = nearbyTip()
73+
.chart(chart)
74+
.settings(settings)
75+
.canvas(true)
76+
.xScale(xScale)
77+
.xValueName("x")
78+
.yValueName("y")
79+
.yScale(yScale)
80+
.colour(useGroupColours && colour)
81+
.data(data);
82+
container.call(toolTip);
83+
84+
// render
85+
container.datum(data).call(zoomChart);
86+
if (legend) container.call(legend);
87+
}
88+
xyScatter.plugin = {
89+
type: "d3_xy_scatter",
90+
name: "[d3fc] X/Y Scatter",
91+
max_size: 25000,
92+
initial: {
93+
type: "number",
94+
count: 2
95+
}
96+
};
97+
98+
export default xyScatter;

‎packages/perspective-viewer-d3fc/src/js/series/pointSeries.js‎

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎packages/perspective-viewer-d3fc/src/js/series/pointSeriesCanvas.js‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
*/
99
import {seriesCanvasPoint} from "d3fc";
1010
import {withOpacity, withoutOpacity} from "./seriesColours";
11+
import {groupFromKey} from "./seriesKey";
12+
import {fromDomain} from "./seriesSymbols";
1113

1214
export function pointSeriesCanvas(settings, seriesKey, size, colour, symbols) {
1315
let series = seriesCanvasPoint()
@@ -23,8 +25,10 @@ export function pointSeriesCanvas(settings, seriesKey, size, colour, symbols) {
2325

2426
series.decorate((context, d) => {
2527
if (colour) {
26-
context.strokeStyle = withoutOpacity(colour(d.colorValue || seriesKey));
27-
context.fillStyle = withOpacity(colour(d.colorValue || seriesKey));
28+
const color = colour(d.colorValue !== undefined ? d.colorValue : seriesKey);
29+
30+
context.strokeStyle = withoutOpacity(color);
31+
context.fillStyle = withOpacity(color);
2832
} else {
2933
context.strokeStyle = "rgb(31, 119, 180)";
3034
context.fillStyle = "rgba(31, 119, 180, 0.5)";
@@ -33,3 +37,17 @@ export function pointSeriesCanvas(settings, seriesKey, size, colour, symbols) {
3337

3438
return series;
3539
}
40+
41+
export function symbolTypeFromGroups(settings) {
42+
const col = settings.data && settings.data.length > 0 ? settings.data[0] : {};
43+
const domain = [];
44+
Object.keys(col).forEach(key => {
45+
if (key !== "__ROW_PATH__") {
46+
const group = groupFromKey(key);
47+
if (!domain.includes(group)) {
48+
domain.push(group);
49+
}
50+
}
51+
});
52+
return fromDomain(domain);
53+
}

‎packages/perspective-viewer-d3fc/src/less/chart.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
& d3fc-canvas.plot-area {
3131
display: none;
3232
}
33-
&.d3_xy_scatter_canvas {
33+
&.d3_xy_scatter {
3434
& d3fc-canvas.plot-area {
3535
display: block;
3636
}

0 commit comments

Comments
 (0)