31:T1f34,class LineChart { constructor() { // Declare initial chart state attributes this.state = { id: this.createId(), svgWidth: 400, svgHeight: 400, marginTop: 25, marginBottom: 25, marginRight: 25, marginLeft: 25, container: 'body', defaultTextFill: '#2C3E50', defaultFont: 'Helvetica', ctx: document.createElement('canvas').getContext('2d'), zeroBased: true, data: null, calc: null, svg: null, chart: null, d3Container: null, yTickMax: 100 }; // Dynamically set getter and setter functions for Chart class Object.keys(this.state).forEach(key => { //@ts-ignore this[key] = function(_) { if (!arguments.length) { return this.state[key]; } else { this.state[key] = _; } return this; }; }); // Define handful d3 enter, exit, update pattern method this.initializeEnterExitUpdatePattern(); } // Define enter exit update pattern shorthand initializeEnterExitUpdatePattern() { d3.selection.prototype.patternify = function(params) { var container = this; var selector = params.selector; var elementTag = params.tag; var data = params.data || [selector]; // Pattern in action var selection = container.selectAll('.' + selector).data(data, (d, i) => { if (typeof d === 'object' && d.id) return d.id; return i; }); selection.exit().remove(); selection = selection .enter() .append(elementTag) .merge(selection); selection.attr('class', selector); return selection; }; } getState() { return this.state; } setState(d) { return Object.assign(this.state, d); } createId() { return ( Date.now().toString(36) + Math.random() .toString(36) .substr(2) ); } // Render Chart render() { // Define containers and set SVG width based on container size this.setDynamicContainer(); // Calculate some properties this.calculateProperties(); // Create scales this.createScales(this.getState()); // Draw SVG and its wrappers this.drawSvgAndWrappers(); // Drawing x and y axises this.drawAxises(this.getState()); // Draw Lines this.drawLines(this.getState()); // Draw voronoi tips this.attachVoronoiTip(this.getState()); // listen for resize event and reRender accordingly this.reRenderOnResize(); // Allow chaining return this; } attachVoronoiTip({ data, chart, scaleX, scaleY, tip, calc: { chartWidth, chartHeight } }) { const voronoi = d3.Delaunay.from( data.flat(), d => scaleX(d.x), d => scaleY(d.y) ).voronoi([0, 0, chartWidth, chartHeight]); chart .patternify({ tag: 'g', selector: 'voronoi-wrapper' }) .patternify({ tag: 'path', selector: 'voronoi-path', data: data.flat() }) .attr("opacity", 0.5) .attr("stroke", "#ff1493") .attr("fill", "none") .style("pointer-events", "all") .attr("d", (d, i) => { const pathD = voronoi.renderCell(i); return pathD; }) .on("mouseenter", (event, d, i) => { const c = chart .patternify({ tag: 'circle', selector: 'mouse-enter-circle' }) .attr('r', 3) .attr('cx', scaleX(d.x)) .attr('cy', scaleY(d.y)); tip.show(event, d, c.node()); }) .on("mouseleave", () => { chart.selectAll('.mouse-enter-circle').remove(); tip.hide(); }); } // Create x and y scales createScales({ data, yTickMax, zeroBased, calc: { chartWidth, chartHeight } }) { const minX = d3.min(data, lineData => d3.min(lineData, d => d.x)); const maxX = d3.max(data, lineData => d3.max(lineData, d => d.x)); let minY = d3.min(data, lineData => d3.min(lineData, d => d.y)); if (zeroBased) minY = 0; let maxY = d3.max(data, lineData => d3.max(lineData, d => d.x)); if (yTickMax) maxY = yTickMax; const scaleX = d3 .scaleLinear() .domain([minX, maxX]) .range([0, chartWidth]); const scaleY = d3 .scaleLinear() .domain([minY, maxY]) .range([chartHeight, 0]); this.setState({ scaleX, scaleY }); } drawAxises({ scaleX, scaleY, chart, calc: { chartWidth, chartHeight } }) { const axisWrapper = chart.patternify({ tag: 'g', selector: 'axis-wrapper' }); const xAxisWrapper = axisWrapper .patternify({ tag: 'g', selector: 'x-axis-wrapper' }) .attr('transform', `translate(0,${chartHeight})`); const xAxis = d3.axisBottom(scaleX); xAxisWrapper.call(xAxis); const yAxisWrapper = axisWrapper.patternify({ tag: 'g', selector: 'y-axis-wrapper' }); const yAxis = d3.axisLeft(scaleY); yAxisWrapper.call(yAxis); } drawLines({ data, chart, scaleX, scaleY }) { const line = d3 .line() .x(d => scaleX(d.x)) .y(d => scaleY(d.y)); const linesWrapper = chart.patternify({ tag: 'g', selector: 'lines-wrapper' }); linesWrapper .patternify({ tag: 'path', selector: 'line-paths', data: data }) .attr('d', d => line(d)) .attr('fill', 'none') .attr('stroke-width', 2) .attr('stroke', 'black'); } // Listen resize event and resize on change reRenderOnResize() { const { id, d3Container, svgWidth } = this.getState(); d3.select(window).on('resize.' + id, () => { const containerRect = d3Container.node().getBoundingClientRect(); const newSvgWidth = containerRect.width > 0 ? containerRect.width : svgWidth; this.setState({ svgWidth: newSvgWidth }); this.render(); }); } // Draw SVG and g wrapper drawSvgAndWrappers() { const { d3Container, svgWidth, svgHeight, defaultFont, calc } = this.getState(); const { chartLeftMargin, chartTopMargin, chartWidth, chartHeight } = calc; // Create tip instance const tip = d3Tip() .offset([-10, 0]) .attr('class', 'd3-tip') .html( (EVENT, d) => `

Name

Value

` ); // Draw SVG const svg = d3Container .patternify({ tag: 'svg', selector: 'svg-chart-container' }) .attr('width', svgWidth) .attr('height', svgHeight) .style('background-color', '#fafafa') .attr('font-family', defaultFont); svg.call(tip); //Add container g element var chart = svg .patternify({ tag: 'g', selector: 'chart' }) .attr( 'transform', 'translate(' + chartLeftMargin + ',' + chartTopMargin + ')' ); this.setState({ chart, svg, tip }); } // Calculate some properties calculateProperties() { const { marginTop, marginLeft, marginRight, marginBottom, svgWidth, svgHeight } = this.getState(); // Calculated properties var calc = { id: this.createId(), // id for event handlings, chartTopMargin: marginTop, chartLeftMargin: marginLeft, chartWidth: svgWidth - marginRight - marginLeft, chartHeight: svgHeight - marginBottom - marginTop }; this.setState({ calc }); } // Set dynamic width for chart setDynamicContainer() { const { container, svgWidth } = this.getState(); // Drawing containers const d3Container = d3.select(container); var containerRect = d3Container.node().getBoundingClientRect(); let newSvgWidth = containerRect.width > 0 ? containerRect.width : svgWidth; this.setState({ d3Container, svgWidth: newSvgWidth }); } // Expose method for smoothly updating data updateData(newData) { const { data } = this.getState(); return this; } }32:[] 2f:{"title":"Line Chart Template - with voronoi tips","cells":[{"id":0,"value":"md`# Line Chart Template - with voronoi tips`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"lineChart = {\n const container = html`

`;\n yield container;\n return new LineChart()\n .container(container)\n .svgWidth(width)\n .data(chartData)\n .render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"style('d3 Tip Css')`.d3-tip {\n font-family: Arial, Helvetica, sans-serif;\n line-height: 1.4;\n padding: 20px;\n pointer-events: none !important;\n color: #203d5d;\n box-shadow: 0 4px 20px 4px rgba(0, 20, 60, .1), 0 4px 80px -8px rgba(0, 20, 60, .2);\n background-color: #fff;\n border-radius: 4px;\n}\n\n/* Creates a small triangle extender for the tooltip */\n.d3-tip:after {\n box-sizing: border-box;\n display: inline;\n font-size: 10px;\n width: 100%;\n line-height: 1;\n color: #fff;\n position: absolute;\n pointer-events: none;\n}\n\n/* Northward tooltips */\n.d3-tip.n:after {\n content: \"▼\";\n margin: -1px 0 0 0;\n top: 100%;\n left: 0;\n text-align: center;\n}\n\n/* Eastward tooltips */\n.d3-tip.e:after {\n content: \"◀\";\n margin: -4px 0 0 0;\n top: 50%;\n left: -8px;\n}\n\n/* Southward tooltips */\n.d3-tip.s:after {\n content: \"▲\";\n margin: 0 0 1px 0;\n top: -8px;\n left: 0;\n text-align: center;\n}\n\n/* Westward tooltips */\n.d3-tip.w:after {\n content: \"▶\";\n margin: -4px 0 0 -1px;\n top: 50%;\n left: 100%;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"chartData = [\n [{ x: 10, y: 100 }, { x: 20, y: 90 }, { x: 50, y: 10 }, { x: 70, y: 80 }],\n [\n { x: 10, y: 90 },\n { x: 20, y: 70 },\n { x: 50, y: 20 },\n { x: 60, y: 50 },\n { x: 90, y: 5 }\n ]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require('d3@v6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"d3V6Tip = require('d3-v6-tip', \"d3-delaunay@4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"d3Tip = d3V6Tip.tip","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"import { style } from \"@bumbeishvili/utils\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}