Published
Edited
Dec 25, 2021
1 fork
class Chart {
constructor() {
// Defining state attributes
const attrs = {
id: "ID" + Math.floor(Math.random() * 1000000),
svgWidth: 400,
svgHeight: 200,
marginTop: 5,
marginBottom: 5,
marginRight: 5,
marginLeft: 5,
container: "body",
defaultTextFill: "#2C3E50",
defaultFont: "Helvetica",
data: null,
chartWidth: null,
chartHeight: null
};
// Defining accessors
this.getState = () => attrs;
this.setState = (d) => Object.assign(attrs, d);
// Automatically generate getter and setters for chart object based on the state properties;
Object.keys(attrs).forEach((key) => {
//@ts-ignore
this[key] = function (_) {
if (!arguments.length) {
return attrs[key];
}
attrs[key] = _;
return this;
};
});
// Custom enter exit update pattern initialization (prototype method)
this.initializeEnterExitUpdatePattern();
}
}
initializeEnterExitUpdatePattern = (Chart.prototype.initializeEnterExitUpdatePattern = function () {
d3.selection.prototype._add = function (params) {
var container = this;
var className = params.className;
var elementTag = params.tag;
var data = params.data || [className];
var exitTransition = params.exitTransition || null;
var enterTransition = params.enterTransition || null;
// Pattern in action
var selection = container.selectAll("." + className).data(data, (d, i) => {
if (typeof d === "object") {
if (d.id) {
return d.id;
}
}
return i;
});
if (exitTransition) {
exitTransition(selection);
} else {
selection.exit().remove();
}
const enterSelection = selection.enter().append(elementTag);
if (enterTransition) {
enterTransition(enterSelection);
}
selection = enterSelection.merge(selection);
selection.attr("class", className);
return selection;
};
})
calculateProperties = (Chart.prototype.calculateProperties = function () {
const {
marginLeft,
marginTop,
marginRight,
marginBottom,
svgWidth,
svgHeight
} = this.getState();
//Calculated properties
var calc = {
id: null,
chartTopMargin: null,
chartLeftMargin: null,
chartWidth: null,
chartHeight: null
};
calc.id = "ID" + Math.floor(Math.random() * 1000000); // id for event handlings
calc.chartLeftMargin = marginLeft;
calc.chartTopMargin = marginTop;
const chartWidth = svgWidth - marginRight - calc.chartLeftMargin;
const chartHeight = svgHeight - marginBottom - calc.chartTopMargin;
this.setState({ calc, chartWidth, chartHeight });
})
setDynamicContainer = (Chart.prototype.setDynamicContainer = function () {
const attrs = this.getState();
//Drawing containers
var d3Container = d3.select(attrs.container);
var containerRect = d3Container.node().getBoundingClientRect();
if (containerRect.width > 0) attrs.svgWidth = containerRect.width;
d3.select(window).on("resize." + attrs.id, function () {
var containerRect = d3Container.node().getBoundingClientRect();
if (containerRect.width > 0) attrs.svgWidth = containerRect.width;
this.render();
});
this.setState({ d3Container });
})
drawSvgAndWrappers = (Chart.prototype.drawSvgAndWrappers = function () {
const {
d3Container,
svgWidth,
svgHeight,
defaultFont,
calc,
data,
chartWidth,
chartHeight
} = this.getState();
// Draw SVG
const svg = d3Container
._add({
tag: "svg",
className: "svg-chart-container"
})
.attr("width", svgWidth)
.attr("height", svgHeight)
.attr("font-family", defaultFont);
//Add container g element
var chart = svg
._add({
tag: "g",
className: "chart"
})
.attr(
"transform",
"translate(" + calc.chartLeftMargin + "," + calc.chartTopMargin + ")"
);
chart
._add({
tag: "rect",
selector: "rect-sample",
data: [data]
})
.attr("width", chartWidth)
.attr("height", chartHeight)
.attr("fill", (d) => d.color);
this.setState({ chart, svg });
})
drawRects = (Chart.prototype.drawRects = function () {
const { chart, data, chartWidth, chartHeight } = this.getState();
chart
._add({
tag: "rect",
selector: "rect-sample",
data: [data]
})
.attr("width", chartWidth)
.attr("height", chartHeight)
.attr("fill", (d) => d.color);
})
render = (Chart.prototype.render = function () {
this.setDynamicContainer();
this.calculateProperties();
this.drawSvgAndWrappers();
this.drawRects();
return this;
})
chartContainer = html`<div style="width:400px; height:300px"></div>`
chart = {
// wait for 1 sec, to allow all external methods to be linked with our class, then invoke it (we won't need it in the real application)
return new Promise((res) => {
setTimeout((d) => {
let ch = new Chart()
.container(chartContainer)
.svgHeight(300)
.marginLeft(100)
.data({ color: "red" })
.render();
res(ch);
}, 1000);
});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
