Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
private updatePlotFromData(treeData: TreeMapData) {
const data: TreeMapData[] = this.getNodeDescendants(treeData).slice().map(dat => ({ ...dat }));
data[0].parentId = ''; // make parent node
const root: HierarchyNode = this.createHierarchy(data);
this.plot.datasets([ new Dataset(this.layout(root).children) ]);
this.resetDomain(this.props);
}
const yScale = new Plottable.Scales.Linear()
const colorScale = new Plottable.Scales.InterpolatedColor()
.range(['#5279C7', '#BDCEF0'])
this.plot = new Plottable.Plots.Bar()
.addDataset(this.totaledRowsDataset)
.addDataset(this.filteredRowsDataset)
.attr('fill', (datum, index, dataset) => dataset.metadata().colorBucket, colorScale)
.x((datum) => datum.label, xScale)
.y((datum) => datum.value, yScale)
.animated(true)
// .labelsEnabled(true)
const selectedData = (selected) ? [selected.value] : []
this.selectedDataset = new Plottable.Dataset(selectedData)
const rectangle = new Plottable.Plots.Rectangle()
.addDataset(this.selectedDataset)
.x((datum) => datum, xScale)
.y(0)
.y2((datum) => rectangle.height())
.attr('fill', '#f99300')
.attr('opacity', 0.3)
xScale.innerPadding(0.4) // See https://github.com/palantir/plottable/issues/3426
const group = new Plottable.Components.Group([ this.plot, rectangle ])
if (onSelect) {
const interaction = new Plottable.Interactions.Click()
interaction.onClick(this.onClickPlot.bind(this))
interaction.attachTo(this.plot)
return {
x: hour,
y: weekday,
val: (ticketsByHour[hour] || []).length,
};
});
});
const xScale = new Plottable.Scales.Category();
const yScale = new Plottable.Scales.Category();
const colorScale = new Plottable.Scales.InterpolatedColor();
colorScale.range(['#eee', '#5279C7']);
const data = _.flatten(groupedTickets);
const plot = new Plottable.Plots.Rectangle()
.addDataset(new Plottable.Dataset(data))
.x((d) => d.x, xScale)
.y((d) => d.y, yScale)
.attr('fill', (d) => d.val, colorScale)
.attr('stroke', '#fff')
.attr('stroke-width', 2)
.renderTo('#week');
// Initializing tooltip anchor
const tooltipAnchorSelection = plot.foreground().append('circle');
tooltipAnchorSelection.attr({
r: 3,
opacity: 0,
});
const tooltipAnchor = $(tooltipAnchorSelection.node());
tooltipAnchor.tooltip({
animation: false,
private processData(props: TreeMapProps) {
if (props.data && props.data.length) {
this.layout = treemap()
.size([ props.width, props.height ])
.tile(treemapResquarify);
this.rootNode = this.createHierarchy(props.data);
const children = this.layout(this.rootNode).children;
if (props.config && props.config.labels) {
this.plot.labelsEnabled(!!props.config.labels.show);
(this.plot as any)._drawLabels = this.createLabels(this.plot, props);
}
this.plot
.addDataset(new Dataset(children))
.x(d => d[`x0`], this.xScale)
.y(d => d[`y0`], this.yScale)
.x2(d => d[`x1`])
.y2(d => d[`y1`])
.attr('fill', d => d.data.fill || '#1F77B4')
.attr('stroke', '#fff')
.attr('stroke-width', 1)
.attr('style', 'fill-opacity: 1;shape-rendering: crispedges')
.label(d => d.data.label)
.animated(true);
}
}
seriesNames.forEach(series => plot.addDataset(new Dataset(groupedBySeries[series])));
seriesNames.forEach(series => plot.addDataset(new Dataset(groupedData[series])));
componentDidMount () {
const { totaledRows, filteredRows, onSelect, selected } = this.props
this.totaledRowsDataset = new Plottable.Dataset(totaledRows)
.metadata({ colorBucket: 5 })
this.filteredRowsDataset = new Plottable.Dataset(filteredRows)
.metadata({ colorBucket: 3 })
const xScale = new Plottable.Scales.Category()
const xAxis = new Plottable.Axes.Category(xScale, 'bottom')
const yScale = new Plottable.Scales.Linear()
const colorScale = new Plottable.Scales.InterpolatedColor()
.range(['#5279C7', '#BDCEF0'])
this.plot = new Plottable.Plots.Bar()
.addDataset(this.totaledRowsDataset)
.addDataset(this.filteredRowsDataset)
.attr('fill', (datum, index, dataset) => dataset.metadata().colorBucket, colorScale)
.x((datum) => datum.label, xScale)
.y((datum) => datum.value, yScale)
.animated(true)
const yScale = new Plottable.Scales.Linear()
const colorScale = new Plottable.Scales.InterpolatedColor()
.range(['#5279C7', '#BDCEF0'])
this.plot = new Plottable.Plots.Area()
.addDataset(this.totaledRowsDataset)
.addDataset(this.filteredRowsDataset)
.attr('fill', (datum, index, dataset) => dataset.metadata().colorBucket, colorScale)
.x((datum) => new Date(datum.label), xScale)
.y((datum) => datum.value, yScale)
.animated(true)
plotGroupItems.push(this.plot)
const selectedData = (selected) ? [selected.value] : []
this.selectedDataset = new Plottable.Dataset(selectedData)
const rectangle = new Plottable.Plots.Rectangle()
.addDataset(this.selectedDataset)
.x((datum) => new Date(datum[0].value), xScale)
.x2((datum) => new Date(datum[1].value))
.y(0)
.y2((datum) => rectangle.height())
.attr('fill', '#f99300')
.attr('opacity', 0.3)
plotGroupItems.push(rectangle)
if (onSelect) {
const dragbox = new Plottable.Components.XDragBoxLayer()
dragbox.onDragEnd(this.onDragEnd.bind(this))
plotGroupItems.push(dragbox)
}