Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
initializeChart(nextProps) {
var Chart = require('chart.js')
var el = ReactDOM.findDOMNode(this.canvassRef.current)
var ctx = el.getContext("2d")
var chart = new Chart(ctx, {type: nextProps.type, data: nextProps.data, options: nextProps.options || {}, plugins: nextProps.plugins || {}})
this.state.chart = chart;
}
}
renderChart() {
this.setData(this.chartConfig)
if (this.chartInstance) {
this.chartInstance.update()
} else {
const canvas = this.chartCanvas.current
const ctx = canvas.getContext('2d')
this.chartInstance = new ChartJS(ctx, this.chartConfig)
}
}
var hits = data.totalHits.map(d => {
return {
x: d.date,
y: d.count
}
})
var devices = data.uniqueHits.map(d => {
return {
x: d.date,
y: d.count
}
})
hits = hits.splice(hits.length - 48 - 1)
devices = devices.splice(devices.length - 48 - 1)
new Chart($('#dailyStats'), {
type: 'line',
data: {
datasets: [{
fill: false,
label: 'Devices',
data: devices,
pointBorderColor: 'rgba(72, 198, 240, 0.4)',
lineTension: 0.2,
backgroundColor: 'rgba(72, 198, 240, 1)',
borderColor: 'rgba(72, 198, 240, 1)',
pointHitRadius: 10,
borderWidth: 4
}, {
fill: false,
label: 'Total Hits',
data: hits,
var hits = [];
var devices = [];
for (var date in data.dailyStats) {
hits.push({
x: new Date(date),
y: parseInt(data.dailyStats[date].totalHits)
});
devices.push({
x: new Date(date),
y: parseInt(data.dailyStats[date].devices)
});
}
hits = hits.splice(hits.length - 48 - 1);
devices = devices.splice(devices.length - 48 - 1);
var dailyStats = new Chart($('#dailyStats'), {
type: 'line',
data: {
datasets: [{
fill: false,
label: 'Devices',
data: devices,
pointBorderColor: 'rgba(72, 198, 240, 0.4)',
lineTension: 0.2,
backgroundColor: "rgba(72, 198, 240, 1)",
borderColor: "rgba(72, 198, 240, 1)",
pointHitRadius: 10,
borderWidth: 4
}, {
fill: false,
label: 'Total Hits',
data: hits,
function draw_drop_points_by_state(_data) {
const d = [];
const l = [];
const c = [];
for (const state in labels) {
if (typeof _data[state] !== 'number' || _data[state] === 0) {
continue;
}
d.push(_data[state]);
c.push(labels[state][2]);
l.push($(labels[state][1]).text());
}
new Chart($('#drop_points_by_state'), {
type: 'doughnut',
data: {
labels: l,
datasets: [
{
data: d,
backgroundColor: c,
hoverBackgroundColor: c,
},
],
},
options,
});
}
var themesLabels = [];
var themesColors = [];
for (var i in data.userStats.theme) {
themesLabels.push(i);
themesNumbers.push(data.userStats.theme[i]);
themesColors.push(themeColorsLabels[i]);
}
var themesData = {
labels: themesLabels,
datasets: [{
data: themesNumbers,
backgroundColor: themesColors,
hoverBackgroundColor: themesColors
}]
};
var themes = new Chart($('#themes'), {
type: 'pie',
data: themesData,
options: {}
});
var osColorsLabels = {
macos: '#1FCEFF',
ios: '#96E8FF',
android: '#FFBE30',
windows: 'blue',
linux: '#45FF30',
Unknown: 'lightgray'
};
var osNumbers = [];
var osLabels = [];
var browserLabels = [];
var browserColors = [];
for (var i in data.userStats.browser) {
browserLabels.push(i);
browserNumbers.push(data.userStats.browser[i]);
browserColors.push(browserColorsLabels[i]);
}
var browserData = {
labels: browserLabels,
datasets: [{
data: browserNumbers,
backgroundColor: browserColors,
hoverBackgroundColor: browserColors
}]
};
var browser = new Chart($('#browser'), {
type: 'pie',
data: browserData,
options: {}
});
});
});