D3fc plugin

packages/perspective-viewer-d3fc/package.json

@@ -53,7 +53,7 @@
         "chroma-js": "^1.3.4",
         "d3": "^5.7.0",
         "d3-svg-legend": "^2.25.6",
-        "d3fc": "^14.0.31",
+        "d3fc": "^14.0.34",
         "gradient-parser": "0.1.5"
     },
     "devDependencies": {

packages/perspective-viewer-d3fc/src/js/axis/crossAxis.js

@@ -42,17 +42,28 @@ const flattenArray = array => {
     }
 };
 
+const getMinimumGap = (data, dataMap) =>
+    data
+        .map(dataMap)
+        .sort((a, b) => a - b)
+        .filter((d, i, a) => i === 0 || d !== a[i - 1])
+        .reduce((acc, d, i, src) => (i === 0 || acc <= d - src[i - 1] ? acc : d - src[i - 1]));
+
 export const domain = settings => {
     let valueName = "crossValue";
     let settingName = "crossValues";
 
-    const extentTime = fc.extentTime().accessors([d => new Date(d[valueName])]);
+    const extentTime = fc
+        .extentTime()
+        .accessors([d => new Date(d[valueName])])
+        .padUnit("domain");
 
     const _domain = function(data) {
         const flattenedData = flattenArray(data);
         switch (axisType(settings, settingName)) {
             case AXIS_TYPES.time:
-                return extentTime(flattenedData);
+                const dataWidth = getMinimumGap(flattenedData, d => new Date(d[valueName]).getTime());
+                return extentTime.pad([dataWidth / 2, dataWidth / 2])(flattenedData);
             default:
                 return [...new Set(flattenedData.map(d => d[valueName]))];
         }

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

@@ -14,7 +14,7 @@ import {seriesColors} from "../series/seriesColors";
 import {splitAndBaseData} from "../data/splitAndBaseData";
 import {colorLegend} from "../legend/legend";
 import {filterData} from "../legend/filter";
-import {withGridLines} from "../gridlines/gridlines";
+import withGridLines from "../gridlines/gridlines";
 
 import {hardLimitZeroPadding} from "../d3fc/padding/hardLimitZero";
 import zoomableChart from "../zoom/zoomableChart";

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

@@ -14,7 +14,7 @@ import {seriesColors} from "../series/seriesColors";
 import {groupAndStackData} from "../data/groupData";
 import {colorLegend} from "../legend/legend";
 import {filterData} from "../legend/filter";
-import {withGridLines} from "../gridlines/gridlines";
+import withGridLines from "../gridlines/gridlines";
 
 import {hardLimitZeroPadding} from "../d3fc/padding/hardLimitZero";
 import zoomableChart from "../zoom/zoomableChart";
@@ -27,16 +27,11 @@ function barChart(container, settings) {
         .settings(settings)
         .scale(color);
 
+    const bars = barSeries(settings, color).orient("horizontal");
     const series = fc
         .seriesSvgMulti()
         .mapping((data, index) => data[index])
-        .series(
-            data.map(() =>
-                barSeries(settings, color)
-                    .align("left")
-                    .orient("horizontal")
-            )
-        );
+        .series(data.map(() => bars));
 
     const yDomain = crossAxis
         .domain(settings)(data)
@@ -68,8 +63,11 @@ function barChart(container, settings) {
         .xNice()
         .plotArea(withGridLines(series).orient("horizontal"));
 
-    chart.yPaddingInner && chart.yPaddingInner(0.5);
-    chart.yPaddingOuter && chart.yPaddingOuter(0.25);
+    if (chart.yPaddingInner) {
+        chart.yPaddingInner(0.5);
+        chart.yPaddingOuter(0.25);
+        bars.align("left");
+    }
 
     const zoomChart = zoomableChart()
         .chart(chart)

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

@@ -6,10 +6,10 @@
  * the Apache License 2.0.  The full license can be found in the LICENSE file.
  *
  */
-import {seriesSvgCandlestick} from "d3fc";
+import {seriesCanvasCandlestick} from "d3fc";
 import ohlcCandle from "./ohlcCandle";
 
-const candlestick = ohlcCandle(seriesSvgCandlestick);
+const candlestick = ohlcCandle(seriesCanvasCandlestick);
 candlestick.plugin = {
     type: "d3_candlestick",
     name: "[d3fc] Candlestick Chart",

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

@@ -14,7 +14,7 @@ import {seriesColors} from "../series/seriesColors";
 import {groupAndStackData} from "../data/groupData";
 import {colorLegend} from "../legend/legend";
 import {filterData} from "../legend/filter";
-import {withGridLines} from "../gridlines/gridlines";
+import withGridLines from "../gridlines/gridlines";
 import {hardLimitZeroPadding} from "../d3fc/padding/hardLimitZero";
 import zoomableChart from "../zoom/zoomableChart";
 
@@ -26,16 +26,11 @@ function columnChart(container, settings) {
         .settings(settings)
         .scale(color);
 
+    const bars = barSeries(settings, color).orient("vertical");
     const series = fc
         .seriesSvgMulti()
         .mapping((data, index) => data[index])
-        .series(
-            data.map(() =>
-                barSeries(settings, color)
-                    .align("left")
-                    .orient("vertical")
-            )
-        );
+        .series(data.map(() => bars));
 
     const xDomain = crossAxis.domain(settings)(data);
     const xScale = crossAxis.scale(settings);
@@ -62,8 +57,11 @@ function columnChart(container, settings) {
         .yNice()
         .plotArea(withGridLines(series).orient("vertical"));
 
-    chart.xPaddingInner && chart.xPaddingInner(0.5);
-    chart.xPaddingOuter && chart.xPaddingOuter(0.25);
+    if (chart.xPaddingInner) {
+        chart.xPaddingInner(0.5);
+        chart.xPaddingOuter(0.25);
+        bars.align("left");
+    }
 
     const zoomChart = zoomableChart()
         .chart(chart)

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

@@ -12,7 +12,7 @@ import {heatmapSeries} from "../series/heatmapSeries";
 import {seriesColorRange} from "../series/seriesRange";
 import {heatmapData} from "../data/heatmapData";
 import {filterData} from "../legend/filter";
-import {withGridLines} from "../gridlines/gridlines";
+import withGridLines from "../gridlines/gridlines";
 import {colorRangeLegend} from "../legend/colorRangeLegend";
 import zoomableChart from "../zoom/zoomableChart";
 
@@ -58,10 +58,16 @@ function heatmapChart(container, settings) {
         .yOrient("left")
         .plotArea(withGridLines(series));
 
-    chart.xPaddingInner && chart.xPaddingInner(0);
-    chart.xPaddingOuter && chart.xPaddingOuter(0);
-    chart.yPaddingInner && chart.yPaddingInner(0);
-    chart.yPaddingOuter && chart.yPaddingOuter(0);
+    if (chart.xPaddingInner) {
+        chart.xPaddingInner(0);
+        chart.xPaddingOuter(0);
+        series.xAlign("right");
+    }
+    if (chart.yPaddingInner) {
+        chart.yPaddingInner(0);
+        chart.yPaddingOuter(0);
+        series.yAlign("top");
+    }
 
     const zoomChart = zoomableChart()
         .chart(chart)

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

@@ -14,7 +14,7 @@ import {lineSeries} from "../series/lineSeries";
 import {splitData} from "../data/splitData";
 import {colorLegend} from "../legend/legend";
 import {filterData} from "../legend/filter";
-import {withGridLines} from "../gridlines/gridlines";
+import withGridLines from "../gridlines/gridlines";
 
 import {hardLimitZeroPadding} from "../d3fc/padding/hardLimitZero";
 import zoomableChart from "../zoom/zoomableChart";

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

@@ -6,10 +6,10 @@
  * the Apache License 2.0.  The full license can be found in the LICENSE file.
  *
  */
-import {seriesSvgOhlc} from "d3fc";
+import {seriesCanvasOhlc} from "d3fc";
 import ohlcCandle from "./ohlcCandle";
 
-const ohlc = ohlcCandle(seriesSvgOhlc);
+const ohlc = ohlcCandle(seriesCanvasOhlc);
 ohlc.plugin = {
     type: "d3_ohlc",
     name: "[d3fc] OHLC Chart",

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

@@ -11,45 +11,42 @@ import * as crossAxis from "../axis/crossAxis";
 import * as mainAxis from "../axis/mainAxis";
 import {ohlcData} from "../data/ohlcData";
 import {filterDataByGroup} from "../legend/filter";
-import {withGridLines} from "../gridlines/gridlines";
+import withGridLines from "../gridlines/gridlines";
 
 import {hardLimitZeroPadding} from "../d3fc/padding/hardLimitZero";
 import zoomableChart from "../zoom/zoomableChart";
 import nearbyTip from "../tooltip/nearbyTip";
-import {seriesUpColors, seriesDownColors} from "../series/seriesColors";
+import {ohlcCandleSeries} from "../series/ohlcCandleSeries";
+import {colorScale, setOpacity} from "../series/seriesColors";
 import {colorLegend} from "../legend/legend";
 
-const isUp = d => d.closeValue >= d.openValue;
-
-function ohlcCandle(seriesSvg) {
+function ohlcCandle(seriesCanvas) {
     return function(container, settings) {
-        const data = ohlcData(settings, filterDataByGroup(settings));
+        const srcData = ohlcData(settings, filterDataByGroup(settings));
+
+        const bollinger = fc.indicatorBollingerBands().value(d => d.openValue);
+        const data = srcData.map(seriesData => {
+            const bollingerData = bollinger(seriesData);
+            return seriesData.map((d, i) => Object.assign({bollinger: bollingerData[i]}, d));
+        });
 
-        const keys = data
+        const keys = srcData
             .map(k => k.key)
             .concat(settings.hideKeys ? settings.hideKeys : [])
             .sort();
 
-        const upColor = seriesUpColors(keys);
-        const downColor = seriesDownColors(keys);
+        const upColor = colorScale()
+            .domain(keys)
+            .mapFunction(setOpacity(1))();
 
         const legend = colorLegend()
             .settings(settings)
             .scale(keys.length > 1 ? upColor : null);
 
-        const series = seriesSvg()
-            .crossValue(d => d.crossValue)
-            .openValue(d => d.openValue)
-            .highValue(d => d.highValue)
-            .lowValue(d => d.lowValue)
-            .closeValue(d => d.closeValue)
-            .decorate(selection => {
-                selection.style("fill", d => (isUp(d) ? upColor(d.key) : downColor(d.key)));
-                selection.style("stroke", d => (isUp(d) ? upColor(d.key) : downColor(d.key)));
-            });
+        const series = ohlcCandleSeries(settings, seriesCanvas, upColor);
 
         const multi = fc
-            .seriesSvgMulti()
+            .seriesCanvasMulti()
             .mapping((data, index) => data[index])
             .series(data.map(() => series));
 
@@ -63,7 +60,7 @@ function ohlcCandle(seriesSvg) {
         const yScale = mainAxis.scale(settings);
 
         const chart = fc
-            .chartSvgCartesian({
+            .chartCanvasCartesian({
                 xScale,
                 yScale,
                 xAxis
@@ -81,7 +78,11 @@ function ohlcCandle(seriesSvg) {
             .yLabel(mainAxis.label(settings))
             .yOrient("left")
             .yNice()
-            .plotArea(withGridLines(multi).orient("vertical"));
+            .plotArea(
+                withGridLines(multi)
+                    .orient("vertical")
+                    .canvas(true)
+            );
 
         chart.xPaddingInner && chart.xPaddingInner(1);
         chart.xPaddingOuter && chart.xPaddingOuter(0.5);
@@ -90,14 +91,17 @@ function ohlcCandle(seriesSvg) {
             .chart(chart)
             .settings(settings)
             .xScale(xScale)
-            .yScale(yScale);
+            .yScale(yScale)
+            .canvas(true);
 
         const toolTip = nearbyTip()
             .settings(settings)
             .xScale(xScale)
             .yScale(yScale)
             .yValueName("closeValue")
-            .data(data);
+            .color(upColor)
+            .data(data)
+            .canvas(true);
 
         // render
         container.datum(data).call(zoomChart);

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

@@ -15,7 +15,7 @@ import {seriesLinearRange, seriesColorRange} from "../series/seriesRange";
 import {symbolLegend} from "../legend/legend";
 import {colorRangeLegend} from "../legend/colorRangeLegend";
 import {filterDataByGroup} from "../legend/filter";
-import {withCanvasGridLines} from "../gridlines/gridlines";
+import withGridLines from "../gridlines/gridlines";
 import {hardLimitZeroPadding} from "../d3fc/padding/hardLimitZero";
 import zoomableChart from "../zoom/zoomableChart";
 import nearbyTip from "../tooltip/nearbyTip";
@@ -60,7 +60,7 @@ function xyScatter(container, settings) {
         .yOrient("left")
         .yNice()
         .xNice()
-        .plotArea(withCanvasGridLines(series));
+        .plotArea(withGridLines(series).canvas(true));
 
     const zoomChart = zoomableChart()
         .chart(chart)

packages/perspective-viewer-d3fc/src/js/charts/y-scatter.js

@@ -14,7 +14,7 @@ import {categoryPointSeries, symbolType} from "../series/categoryPointSeries";
 import {groupData} from "../data/groupData";
 import {symbolLegend} from "../legend/legend";
 import {filterData} from "../legend/filter";
-import {withGridLines} from "../gridlines/gridlines";
+import withGridLines from "../gridlines/gridlines";
 import {hardLimitZeroPadding} from "../d3fc/padding/hardLimitZero";
 import zoomableChart from "../zoom/zoomableChart";
 import nearbyTip from "../tooltip/nearbyTip";