deno.land / x / billboardjs@3.6.0 / ChartInternal / interactions / subchart.ts
نووسراو ببینە
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392/** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */import {select as d3Select} from "d3-selection";import { brushX as d3BrushX, brushY as d3BrushY, brushSelection as d3BrushSelection} from "d3-brush";import CLASS from "../../config/classes";import {brushEmpty, capitalize, isArray, isFunction, parseDate} from "../../module/util";
export default { /** * Initialize the brush. * @private */ initBrush(): void { const $$ = this; const {config, scale, $el: {subchart}} = $$; const isRotated = config.axis_rotated; let lastDomain; let timeout;
// set the brush $$.brush = ( isRotated ? d3BrushY() : d3BrushX() ).handleSize(5);
const getBrushSize = () => { const brush = $$.$el.svg.select(`.${CLASS.brush} .overlay`); const brushSize = {width: 0, height: 0};
if (brush.size()) { brushSize.width = +brush.attr("width"); brushSize.height = +brush.attr("height"); }
return brushSize[isRotated ? "width" : "height"]; };
// bind brush event $$.brush.on("start brush end", event => { const {selection, target, type} = event;
if (type === "start") { $$.state.inputType === "touch" && $$.hideTooltip(); }
if (/(start|brush)/.test(type)) { $$.redrawForBrush(); }
if (type === "end") { lastDomain = scale.x.orgDomain(); }
// handle brush's handle position & visibility if (target?.handle) { if (selection === null) { $$.brush.handle.attr("display", "none"); } else { $$.brush.handle.attr("display", null) .attr("transform", (d, i) => { const pos = isRotated ? [33, selection[i] - (i === 0 ? 30 : 24)] : [selection[i], 3];
return `translate(${pos})`; }); } } });
$$.brush.updateResize = function() { timeout && clearTimeout(timeout); timeout = setTimeout(() => { const selection = this.getSelection();
lastDomain && d3BrushSelection(selection.node()) && this.move(selection, lastDomain.map(scale.subX.orgScale())); }, 0); };
$$.brush.update = function() { const extent = this.extent()();
if (extent[1].filter(v => isNaN(v)).length === 0) { subchart.main?.select(`.${CLASS.brush}`).call(this); }
return this; };
// set the brush extent $$.brush.scale = function(scale) { const h = config.subchart_size_height || getBrushSize(); let extent = $$.getExtent();
if (!extent && scale.range) { extent = [[0, 0], [scale.range()[1], h]]; } else if (isArray(extent)) { extent = extent.map((v, i) => [v, i > 0 ? h : i]); }
// [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner and [x1, y1] is the bottom-right corner isRotated && extent[1].reverse(); this.extent(extent);
// when extent updates, brush selection also be re-applied // https://github.com/d3/d3/issues/2918 this.update(); };
$$.brush.getSelection = () => ( // @ts-ignore subchart.main ? subchart.main.select(`.${CLASS.brush}`) : d3Select([]) ); },
/** * Initialize the subchart. * @private */ initSubchart(): void { const $$ = this; const {config, state: {clip, hasAxis}, $el: {defs, svg, subchart, axis}} = $$;
if (!hasAxis) { return; }
const visibility = config.subchart_show ? null : "hidden"; const clipId = `${clip.id}-subchart`; const clipPath = $$.getClipPath(clipId);
clip.idSubchart = clipId; $$.appendClip(defs, clipId); $$.initBrush();
subchart.main = svg.append("g") .classed(CLASS.subchart, true) .attr("transform", $$.getTranslate("context"));
const {main} = subchart;
main.style("visibility", visibility);
// Define g for chart area main.append("g") .attr("clip-path", clipPath) .attr("class", CLASS.chart);
// Define g for chart types area ["bar", "line", "bubble", "candlestick", "scatter"].forEach(v => { const type = capitalize(/^(bubble|scatter)$/.test(v) ? "circle" : v);
if ($$.hasType(v) || $$.hasTypeOf(type)) { const chart = main.select(`.${CLASS.chart}`); const chartClassName = CLASS[`chart${type}s`];
if (chart.select(`.${chartClassName}`).empty()) { chart .append("g") .attr("class", chartClassName); } } });
// Add extent rect for Brush const brush = main.append("g") .attr("clip-path", clipPath) .attr("class", CLASS.brush) .call($$.brush);
config.subchart_showHandle && $$.addBrushHandle(brush);
// ATTENTION: This must be called AFTER chart added // Add Axis axis.subX = main.append("g") .attr("class", CLASS.axisX) .attr("transform", $$.getTranslate("subX")) .attr("clip-path", config.axis_rotated ? "" : clip.pathXAxis) .style("visibility", config.subchart_axis_x_show ? visibility : "hidden"); },
/** * Add brush handle * Enabled when: subchart.showHandle=true * @param {d3Selection} brush Brush selection * @private */ addBrushHandle(brush): void { const $$ = this; const {config} = $$; const isRotated = config.axis_rotated; const initRange = config.subchart_init_range; const customHandleClass = "handle--custom";
// brush handle shape's path const path = isRotated ? [ "M 5.2491724,29.749209 a 6,6 0 0 0 -5.50000003,-6.5 H -5.7508276 a 6,6 0 0 0 -6.0000004,6.5 z m -5.00000003,-2 H -6.7508276 m 6.99999997,-2 H -6.7508276Z", "M 5.2491724,23.249172 a 6,-6 0 0 1 -5.50000003,6.5 H -5.7508276 a 6,-6 0 0 1 -6.0000004,-6.5 z m -5.00000003,2 H -6.7508276 m 6.99999997,2 H -6.7508276Z" ] : [ "M 0 18 A 6 6 0 0 0 -6.5 23.5 V 29 A 6 6 0 0 0 0 35 Z M -2 23 V 30 M -4 23 V 30Z", "M 0 18 A 6 6 0 0 1 6.5 23.5 V 29 A 6 6 0 0 1 0 35 Z M 2 23 V 30 M 4 23 V 30Z" ];
$$.brush.handle = brush.selectAll(`.${customHandleClass}`) .data(isRotated ? [{type: "n"}, {type: "s"}] : [{type: "w"}, {type: "e"}] ) .enter() .append("path") .attr("class", customHandleClass) .attr("cursor", `${isRotated ? "ns" : "ew"}-resize`) .attr("d", d => path[+/[se]/.test(d.type)]) .attr("display", initRange ? null : "none"); },
/** * Update sub chart * @param {object} targets $$.data.targets * @private */ updateTargetsForSubchart(targets): void { const $$ = this; const {config, state, $el: {subchart: {main}}} = $$;
if (config.subchart_show) { ["bar", "line", "bubble", "candlestick", "scatter"] .filter(v => $$.hasType(v) || $$.hasTypeOf(capitalize(v))) .forEach(v => { const isPointType = /^(bubble|scatter)$/.test(v); const name = capitalize(isPointType ? "circle" : v); const chartClass = $$.getChartClass(name, true); const shapeClass = $$.getClass(isPointType ? "circles" : `${v}s`, true);
const shapeChart = main.select(`.${CLASS[`chart${`${name}s`}`]}`);
if (isPointType) { const circle = shapeChart .selectAll(`.${CLASS.circles}`) .data(targets.filter($$[`is${capitalize(v)}Type`].bind($$))) .attr("class", shapeClass);
circle.exit().remove(); circle.enter().append("g") .attr("class", shapeClass); } else { const shapeUpdate = shapeChart .selectAll(`.${CLASS[`chart${name}`]}`) .attr("class", chartClass) .data(targets.filter($$[`is${name}Type`].bind($$)));
const shapeEnter = shapeUpdate.enter() .append("g") .style("opacity", "0") .attr("class", chartClass) .append("g") .attr("class", shapeClass);
shapeUpdate.exit().remove();
// Area v === "line" && $$.hasTypeOf("Area") && shapeEnter.append("g").attr("class", $$.getClass("areas", true)); } });
// -- Brush --// main.selectAll(`.${CLASS.brush} rect`) .attr(config.axis_rotated ? "width" : "height", config.axis_rotated ? state.width2 : state.height2); } },
/** * Redraw subchart. * @private * @param {boolean} withSubchart whether or not to show subchart * @param {number} duration duration * @param {object} shape Shape's info */ redrawSubchart(withSubchart: boolean, duration: number, shape): void { const $$ = this; const {config, $el: {subchart: {main}}, state} = $$; const withTransition = !!duration;
main.style("visibility", config.subchart_show ? null : "hidden");
// subchart if (config.subchart_show) { // reflect main chart to extent on subchart if zoomed if (state.event?.type === "zoom") { $$.brush.update(); }
// update subchart elements if needed if (withSubchart) { const initRange = config.subchart_init_range;
// extent rect !brushEmpty($$) && $$.brush.update();
Object.keys(shape.type).forEach(v => { const name = capitalize(v); const drawFn = $$[`generateDraw${name}`](shape.indices[v], true);
// call shape's update & redraw method $$[`update${name}`](withTransition, true); $$[`redraw${name}`](drawFn, withTransition, true); });
if ($$.hasType("bubble") || $$.hasType("scatter")) { const {cx} = shape.pos; const cy = $$.updateCircleY(true);
$$.updateCircle(true); $$.redrawCircle(cx, cy, withTransition, undefined, true); }
!state.rendered && initRange && $$.brush.move( $$.brush.getSelection(), initRange.map($$.scale.x) ); } } },
/** * Redraw the brush. * @private */ redrawForBrush() { const $$ = this; const {config: {subchart_onbrush: onBrush, zoom_rescale: withY}, scale} = $$;
$$.redraw({ withTransition: false, withY, withSubchart: false, withUpdateXDomain: true, withDimension: false });
onBrush.bind($$.api)(scale.x.orgDomain()); },
/** * Transform context * @param {boolean} withTransition indicates transition is enabled * @param {object} transitions The return value of the generateTransitions method of Axis. * @private */ transformContext(withTransition, transitions): void { const $$ = this; const {$el: {subchart}, $T} = $$;
const subXAxis = transitions?.axisSubX ? transitions.axisSubX : $T(subchart.main.select(`.${CLASS.axisX}`), withTransition);
subchart.main.attr("transform", $$.getTranslate("context")); subXAxis.attr("transform", $$.getTranslate("subX")); },
/** * Get extent value * @returns {Array} default extent * @private */ getExtent(): number[] { const $$ = this; const {config, scale} = $$; let extent = config.axis_x_extent;
if (extent) { if (isFunction(extent)) { extent = extent.bind($$.api)($$.getXDomain($$.data.targets), scale.subX); } else if ($$.axis.isTimeSeries() && extent.every(isNaN)) { const fn = parseDate.bind($$);
extent = extent.map(v => scale.subX(fn(v))); } }
return extent; }};
billboardjs
Version Info
a year ago
