[demo] correct example
This commit is contained in:
parent
eb3cd64b1b
commit
8b61bcf888
12
dist/frappe-charts.esm.js
vendored
12
dist/frappe-charts.esm.js
vendored
@ -282,6 +282,10 @@ class SvgTip {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the value of a number upto 2 decimal places.
|
||||||
|
* @param {Number} d Any number
|
||||||
|
*/
|
||||||
function floatTwo(d) {
|
function floatTwo(d) {
|
||||||
return parseFloat(d.toFixed(2));
|
return parseFloat(d.toFixed(2));
|
||||||
}
|
}
|
||||||
@ -1724,14 +1728,13 @@ const NO_OF_DAYS_IN_WEEK = 7;
|
|||||||
const NO_OF_MILLIS = 1000;
|
const NO_OF_MILLIS = 1000;
|
||||||
const SEC_IN_DAY = 86400;
|
const SEC_IN_DAY = 86400;
|
||||||
|
|
||||||
const MONTH_NAMES = ["January", "February", "March", "April", "May", "June",
|
const MONTH_NAMES = ["January", "February", "March", "April", "May",
|
||||||
"July", "August", "September", "October", "November", "December"];
|
"June", "July", "August", "September", "October", "November", "December"];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const DAY_NAMES_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
const DAY_NAMES_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
||||||
|
|
||||||
|
|
||||||
// https://stackoverflow.com/a/11252167/6495043
|
// https://stackoverflow.com/a/11252167/6495043
|
||||||
function treatAsUtc(date) {
|
function treatAsUtc(date) {
|
||||||
let result = new Date(date);
|
let result = new Date(date);
|
||||||
@ -3635,6 +3638,7 @@ class AxisChart extends BaseChart {
|
|||||||
// removeDataPoint(index = 0) {}
|
// removeDataPoint(index = 0) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// import MultiAxisChart from './charts/MultiAxisChart';
|
||||||
const chartTypes = {
|
const chartTypes = {
|
||||||
bar: AxisChart,
|
bar: AxisChart,
|
||||||
line: AxisChart,
|
line: AxisChart,
|
||||||
|
|||||||
2
dist/frappe-charts.min.iife.js.map
vendored
2
dist/frappe-charts.min.iife.js.map
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -88,7 +88,7 @@ Array.prototype.slice.call(
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelector('.export-aggr').addEventListener('click', (e) => {
|
document.querySelector('.export-aggr').addEventListener('click', () => {
|
||||||
aggrChart.export();
|
aggrChart.export();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -181,7 +181,7 @@ chartUpdateButtons.querySelector('[data-update="remove"]').addEventListener("cli
|
|||||||
updateChart.removeDataPoint();
|
updateChart.removeDataPoint();
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelector('.export-update').addEventListener('click', (e) => {
|
document.querySelector('.export-update').addEventListener('click', () => {
|
||||||
updateChart.export();
|
updateChart.export();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -233,7 +233,7 @@ Array.prototype.slice.call(
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelector('.export-trends').addEventListener('click', (e) => {
|
document.querySelector('.export-trends').addEventListener('click', () => {
|
||||||
trendsChart.export();
|
trendsChart.export();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -356,6 +356,6 @@ Array.prototype.slice.call(
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelector('.export-heatmap').addEventListener('click', (e) => {
|
document.querySelector('.export-heatmap').addEventListener('click', () => {
|
||||||
heatmapChart.export();
|
heatmapChart.export();
|
||||||
});
|
});
|
||||||
|
|||||||
9
docs/assets/js/index.min.js
vendored
9
docs/assets/js/index.min.js
vendored
@ -118,7 +118,6 @@ var NO_OF_MILLIS = 1000;
|
|||||||
var SEC_IN_DAY = 86400;
|
var SEC_IN_DAY = 86400;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||||
|
|
||||||
|
|
||||||
@ -385,7 +384,7 @@ Array.prototype.slice.call(document.querySelectorAll('.aggr-type-buttons button'
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelector('.export-aggr').addEventListener('click', function (e) {
|
document.querySelector('.export-aggr').addEventListener('click', function () {
|
||||||
aggrChart.export();
|
aggrChart.export();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -474,7 +473,7 @@ chartUpdateButtons.querySelector('[data-update="remove"]').addEventListener("cli
|
|||||||
updateChart.removeDataPoint();
|
updateChart.removeDataPoint();
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelector('.export-update').addEventListener('click', function (e) {
|
document.querySelector('.export-update').addEventListener('click', function () {
|
||||||
updateChart.export();
|
updateChart.export();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -523,7 +522,7 @@ Array.prototype.slice.call(document.querySelectorAll('.chart-plot-buttons button
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelector('.export-trends').addEventListener('click', function (e) {
|
document.querySelector('.export-trends').addEventListener('click', function () {
|
||||||
trendsChart.export();
|
trendsChart.export();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -634,7 +633,7 @@ Array.prototype.slice.call(document.querySelectorAll('.heatmap-color-buttons but
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelector('.export-heatmap').addEventListener('click', function (e) {
|
document.querySelector('.export-heatmap').addEventListener('click', function () {
|
||||||
heatmapChart.export();
|
heatmapChart.export();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -56,15 +56,15 @@
|
|||||||
|
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
label: "Some Data", type: 'bar',
|
label: "Some Data", chartType: 'bar',
|
||||||
values: [25, 40, 30, 35, 8, 52, 17, -4]
|
values: [25, 40, 30, 35, 8, 52, 17, -4]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Another Set", type: 'bar',
|
label: "Another Set", chartType: 'bar',
|
||||||
values: [25, 50, -10, 15, 18, 32, 27, 14]
|
values: [25, 50, -10, 15, 18, 32, 27, 14]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Yet Another", type: 'line',
|
label: "Yet Another", chartType: 'line',
|
||||||
values: [15, 20, -3, -15, 58, 12, -17, 37]
|
values: [15, 20, -3, -15, 58, 12, -17, 37]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
@ -77,7 +77,10 @@
|
|||||||
type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage'
|
type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage'
|
||||||
height: 250,
|
height: 250,
|
||||||
colors: ['purple', '#ffa3ef', 'red']
|
colors: ['purple', '#ffa3ef', 'red']
|
||||||
});</code></pre>
|
});
|
||||||
|
|
||||||
|
chart.export();
|
||||||
|
</code></pre>
|
||||||
<!-- <div id="chart-types" class="border" style="margin-bottom: 15px"></div> -->
|
<!-- <div id="chart-types" class="border" style="margin-bottom: 15px"></div> -->
|
||||||
<!-- <div >
|
<!-- <div >
|
||||||
<div class="btn-group x-axis-buttons margin-vertical-px" role="group">
|
<div class="btn-group x-axis-buttons margin-vertical-px" role="group">
|
||||||
@ -100,7 +103,9 @@
|
|||||||
<button type="button" class="btn btn-sm btn-secondary" data-type='pie'>Pie Chart</button>
|
<button type="button" class="btn btn-sm btn-secondary" data-type='pie'>Pie Chart</button>
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
|
<button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn btn-sm btn-tertiary export-aggr">Export</button>
|
<div class="btn-group export-buttons margin-vertical-px mx-auto" role="group">
|
||||||
|
<button type="button" class="btn btn-sm btn-secondary export-aggr">Export ...</button>
|
||||||
|
</div>
|
||||||
<!-- <p class="text-muted">
|
<!-- <p class="text-muted">
|
||||||
<a target="_blank" href="http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts">Why Percentage?</a>
|
<a target="_blank" href="http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts">Why Percentage?</a>
|
||||||
</p> -->
|
</p> -->
|
||||||
@ -117,7 +122,7 @@
|
|||||||
<button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button>
|
<button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button>
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-update="add">Add Value</button>
|
<button type="button" class="btn btn-sm btn-secondary" data-update="add">Add Value</button>
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value</button>
|
<button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value</button>
|
||||||
<button type="button" class="btn btn-sm btn-tertiary export-update">Export</button>
|
<button type="button" class="btn btn-sm btn-secondary export-update">Export ...</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -134,7 +139,9 @@
|
|||||||
<button type="button" class="btn btn-sm btn-secondary active" data-type="heatline">HeatLine</button>
|
<button type="button" class="btn btn-sm btn-secondary active" data-type="heatline">HeatLine</button>
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-type="regionFill">Region</button>
|
<button type="button" class="btn btn-sm btn-secondary" data-type="regionFill">Region</button>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn btn-sm btn-tertiary export-trends">Export</button>
|
<div class="btn-group export-buttons mt-1 mx-auto" role="group">
|
||||||
|
<button type="button" class="btn btn-sm btn-secondary export-trends">Export ...</button>
|
||||||
|
</div>
|
||||||
<!-- <pre><code class="hljs javascript margin-vertical-px"> ...
|
<!-- <pre><code class="hljs javascript margin-vertical-px"> ...
|
||||||
lineOptions: 'line', // Line Chart specific properties:
|
lineOptions: 'line', // Line Chart specific properties:
|
||||||
|
|
||||||
@ -194,7 +201,9 @@
|
|||||||
<button type="button" class="btn btn-sm btn-secondary active" data-color="blue">Blue</button>
|
<button type="button" class="btn btn-sm btn-secondary active" data-color="blue">Blue</button>
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-color="halloween">GitHub's Halloween</button>
|
<button type="button" class="btn btn-sm btn-secondary" data-color="halloween">GitHub's Halloween</button>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn btn-sm btn-tertiary export-heatmap">Export</button>
|
<div class="btn-group export-buttons mt-1 mx-auto" role="group">
|
||||||
|
<button type="button" class="btn btn-sm btn-secondary export-heatmap">Export ...</button>
|
||||||
|
</div>
|
||||||
<pre><code class="hljs javascript margin-vertical-px"> let heatmap = new Chart("#heatmap", {
|
<pre><code class="hljs javascript margin-vertical-px"> let heatmap = new Chart("#heatmap", {
|
||||||
type: 'heatmap',
|
type: 'heatmap',
|
||||||
height: 115,
|
height: 115,
|
||||||
|
|||||||
@ -102,4 +102,3 @@ export function animatePath(paths, newXList, newYList, zeroLine) {
|
|||||||
export function animatePathStr(oldPath, pathStr) {
|
export function animatePathStr(oldPath, pathStr) {
|
||||||
return [oldPath, {d: pathStr}, UNIT_ANIM_DUR, STD_EASING];
|
return [oldPath, {d: pathStr}, UNIT_ANIM_DUR, STD_EASING];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -6,13 +6,14 @@ export const DAYS_IN_YEAR = 375;
|
|||||||
export const NO_OF_MILLIS = 1000;
|
export const NO_OF_MILLIS = 1000;
|
||||||
export const SEC_IN_DAY = 86400;
|
export const SEC_IN_DAY = 86400;
|
||||||
|
|
||||||
export const MONTH_NAMES = ["January", "February", "March", "April", "May", "June",
|
export const MONTH_NAMES = ["January", "February", "March", "April", "May",
|
||||||
"July", "August", "September", "October", "November", "December"];
|
"June", "July", "August", "September", "October", "November", "December"];
|
||||||
|
export const MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
|
||||||
|
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||||
|
|
||||||
export const MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
||||||
|
|
||||||
export const DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
|
||||||
export const DAY_NAMES_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
export const DAY_NAMES_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
||||||
|
export const DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday",
|
||||||
|
"Thursday", "Friday", "Saturday"];
|
||||||
|
|
||||||
// https://stackoverflow.com/a/11252167/6495043
|
// https://stackoverflow.com/a/11252167/6495043
|
||||||
function treatAsUtc(date) {
|
function treatAsUtc(date) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user