jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[docs] migrate more sections, demos and install

Browse Source
This commit is contained in:
Prateeksha Singh 2018-04-30 13:05:32 +05:30
parent b4d098d1e8
commit dc6ae93742
10 changed files with 279 additions and 331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dist/frappe-charts.esm.js vendored
View File

@ -301,6 +301,10 @@ class SvgTip {
}
}
/**
* Returns the value of a number upto 2 decimal places.
* @param {Number} d Any number
*/
function floatTwo(d) {
return parseFloat(d.toFixed(2));
}

2
dist/frappe-charts.min.cjs.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.esm.js.map vendored
View File

File diff suppressed because one or more lines are too long

7
docs/assets/css/index.css
View File

@ -51,8 +51,11 @@ section figure {
border-radius: 3px;
overflow: auto;
}
section code {
margin-top: 1rem; /* SAME 2 */
.btn, .btn-group {
margin-bottom: 1rem;
}
.btn-group {
margin-right: 0.5rem;
}
h1 {
font-size: 3.5rem;

150
docs/assets/js/demoConfig.js
View File

@ -1,4 +1,4 @@
import { lineCompositeData, barCompositeData, trendsData, heatmapData } from './data';
import { lineCompositeData, barCompositeData, typeData, trendsData, heatmapData } from './data';
import { HEATMAP_COLORS_YELLOW, HEATMAP_COLORS_BLUE } from '../../../src/js/utils/constants';
export default {
@ -35,12 +35,8 @@ export default {
},
demoMain: {
title: "Creating a Chart",
title: "Create a Chart",
contentBlocks: [
{
type: "text",
content: `Booga wooga wooga Booga Booga wooga`,
},
{
type: "code",
lang: "html",
@ -94,7 +90,7 @@ export default {
type: "demo",
config: {
title: "My Awesome Chart",
data: "typeData",
data: typeData,
type: "axis-mixed",
height: 300,
colors: ["purple", "magenta", "light-blue"],
@ -105,20 +101,19 @@ export default {
formatTooltipY: d => d + ' pts',
}
},
sideContent: {},
options: [
{
name: "lineOptions",
path: ["lineOptions"],
type: "map",
mapKeys: ['hideLine', 'hideDots', 'heatline', 'regionFill'],
name: "type",
path: ["type"],
type: "string",
states: {
"Line": [0, 1, 0, 0],
"Dots": [1, 0, 0, 0],
"HeatLine": [0, 1, 1, 0],
"Region": [0, 1, 0, 1]
"Mixed": 'axis-mixed',
"Line": 'line',
"Bar": 'bar',
"Pie Chart": 'pie',
"Percentage Chart": 'percentage',
},
activeState: "HeatLine"
activeState: "Mixed"
}
],
actions: [{ name: "Export ...", fn: "export", args: [] }],
@ -224,5 +219,126 @@ export default {
});`,
}
],
},
codePenDemo: {
title: "Demo",
contentBlocks: [
{
type: "custom",
html: `<p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"
data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">
See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>
by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on
<a href="https://codepen.io">CodePen</a>.
</p>`
}
]
},
optionsList: {
title: "Available Options",
contentBlocks: [
{
type: "code",
lang: "javascript",
content: `
...
{
data: {
labels: [],
datasets: [],
yRegions: [],
yMarkers: []
}
title: '',
colors: [],
height: 200,
tooltipOptions: {
formatTooltipX: d => (d + '').toUpperCase(),
formatTooltipY: d => d + ' pts',
}
// Axis charts
isNavigable: 1, // default: 0
valuesOverPoints: 1, // default: 0
barOptions: {
spaceRatio: 1 // default: 0.5
stacked: 1 // default: 0
}
lineOptions: {
dotSize: 6, // default: 4
hideLine: 0, // default: 0
hideDots: 1, // default: 0
heatline: 1, // default: 0
regionFill: 1 // default: 0
}
axisOptions: {
yAxisMode: 'span', // Axis lines, default
xAxisMode: 'tick', // No axis lines, only short ticks
xIsSeries: 1 // Allow skipping x values for space
// default: 0
},
// Pie/Percentage charts
maxLegendPoints: 6, // default: 20
maxSlices: 10, // default: 20
// Percentage chart
barOptions: {
height: 15 // default: 20
depth: 5 // default: 2
}
// Heatmap
discreteDomains: 1, // default: 1
}
...
// Updating values
chart.update(data);
// Axis charts:
chart.addDataPoint(label, valueFromEachDataset, index)
chart.removeDataPoint(index)
chart.updateDataset(datasetValues, index)
// Exporting
chart.export();
// Unbind window-resize events
chart.unbindWindowEvents();
`
}
]
},
installation: {
title: "Install",
contentBlocks: [
{ type: "text", content: 'Install via npm' },
{ type: "code", lang: "console", content: ` npm install frappe-charts` },
{ type: "text", content: 'And include it in your project' },
{ type: "code", lang: "javascript", content: ` import { Chart } from "frappe-charts` },
{ type: "text", content: 'Use as:' },
{
type: "code",
lang: "javascript",
content: ` new Chart(); // ES6 module
// or
new frappe.Chart(); // Browser`,
},
{ type: "text", content: '... or include it directly in your HTML' },
{
type: "code",
lang: "html",
content: ` &lt;script src="https://unpkg.com/frappe-charts@1.1.0"&gt;&lt;/script&gt;`,
},
]
}
}

36
docs/assets/js/docSectionBuilder.js
View File

@ -1,4 +1,5 @@
import { $ } from '../../../src/js/utils/dom';
import { toTitleCase } from '../../../src/js/utils/helpers';
export class docSectionBuilder {
constructor(LIB_OBJ) {
@ -26,26 +27,31 @@ export class docSectionBuilder {
}
getBlock(blockConf) {
let block;
let type = blockConf.type;
if(type === "text") {
block = this.getText(blockConf);
} else if(type === "code") {
block = this.getCode(blockConf);
let fnName = 'get' + toTitleCase(blockConf.type);
if(this[fnName]) {
return this[fnName](blockConf);
} else {
block = this.getDemo(blockConf);
throw new Error(`Unknown section block type '${blockConf.type}'.`);
}
}
getText(blockConf) {}
getCode(blockConf) {
let pre = $.create('pre', { inside: this.section });
let code = $.create('code', {
inside: pre,
className: `hljs ${blockConf.lang}`,
getText(blockConf) {
return $.create('p', {
inside: this.section,
innerHTML: blockConf.content
});
}
getCode(blockConf) {
let pre = $.create('pre', { inside: this.section });
let lang = blockConf.lang || 'javascript';
let code = $.create('code', {
inside: pre,
className: `hljs ${lang}`,
innerHTML: blockConf.content
});
}
getCustom(blockConf) {
this.section.innerHTML += blockConf.html;
}
getDemo(blockConf) {
let args = blockConf.config;
let figure = $.create('figure', { inside: this.section });
@ -81,7 +87,7 @@ export class docSectionBuilder {
args[o.path[0]][attr] = state[i];
})
} else {
// boolean, number, object
// boolean, string, number, object
args[o.path[0]] = state;
}
this.libObj = new this.LIB_OBJ(figure, args);

77
docs/assets/js/index.js
View File

@ -18,62 +18,10 @@ lineComposite.parent.addEventListener('data-select', (e) => {
]);
});
// ================================================================================
let customColors = ['purple', 'magenta', 'light-blue'];
let typeChartArgs = {
title: "My Awesome Chart",
data: typeData,
type: 'axis-mixed',
height: 300,
colors: customColors,
valuesOverPoints: 1,
// maxLegendPoints: 6,
maxSlices: 10,
tooltipOptions: {
formatTooltipX: d => (d + '').toUpperCase(),
formatTooltipY: d => d + ' pts',
}
};
let aggrChart = new Chart("#chart-aggr", typeChartArgs);
Array.prototype.slice.call(
document.querySelectorAll('.aggr-type-buttons button')
).map(el => {
el.addEventListener('click', (e) => {
let btn = e.target;
let type = btn.getAttribute('data-type');
typeChartArgs.type = type;
if(type !== 'axis-mixed') {
typeChartArgs.colors = undefined;
} else {
typeChartArgs.colors = customColors;
}
if(type !== 'percentage') {
typeChartArgs.height = 300;
} else {
typeChartArgs.height = undefined;
}
let newChart = new Chart("#chart-aggr", typeChartArgs);
if(newChart){
aggrChart = newChart;
}
Array.prototype.slice.call(
btn.parentNode.querySelectorAll('button')).map(el => {
el.classList.remove('active');
});
btn.classList.add('active');
});
});
document.querySelector('.export-aggr').addEventListener('click', () => {
aggrChart.export();
});
let section = document.querySelector('.demo-main');
dcb.setParent(section);
dcb.setSys(dc.demoMain);
dcb.make();
// Update values chart
// ================================================================================
@ -171,7 +119,7 @@ document.querySelector('.export-update').addEventListener('click', () => {
// Trends Chart
// ================================================================================
let section = document.querySelector('.trends-plot');
section = document.querySelector('.trends-plot');
dcb.setParent(section);
dcb.setSys(dc.trendsPlot);
dcb.make();
@ -214,3 +162,18 @@ section = document.querySelector('.heatmap');
dcb.setParent(section);
dcb.setSys(dc.heatmap);
dcb.make();
section = document.querySelector('.codepen');
dcb.setParent(section);
dcb.setSys(dc.codePenDemo);
dcb.make();
section = document.querySelector('.options');
dcb.setParent(section);
dcb.setSys(dc.optionsList);
dcb.make();
section = document.querySelector('.installation');
dcb.setParent(section);
dcb.setSys(dc.installation);
dcb.make();

169
docs/assets/js/index.min.js vendored
View File

@ -265,6 +265,14 @@ function getRandomBias(min, max, bias, influence) {
return rnd * (1 - mix) + biasValue * mix; // mix full range and bias
}
function toTitleCase(str) {
return str.replace(/\w*/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
}
// Playing around with dates
@ -492,11 +500,8 @@ var dc = {
},
demoMain: {
title: "Creating a Chart",
title: "Create a Chart",
contentBlocks: [{
type: "text",
content: 'Booga wooga wooga Booga Booga wooga'
}, {
type: "code",
lang: "html",
content: ' &lt!--HTML--&gt;\n &lt;figure id="frost-chart"&gt;&lt;/figure&gt;'
@ -508,7 +513,7 @@ var dc = {
type: "demo",
config: {
title: "My Awesome Chart",
data: "typeData",
data: typeData,
type: "axis-mixed",
height: 300,
colors: ["purple", "magenta", "light-blue"],
@ -523,19 +528,18 @@ var dc = {
}
}
},
sideContent: {},
options: [{
name: "lineOptions",
path: ["lineOptions"],
type: "map",
mapKeys: ['hideLine', 'hideDots', 'heatline', 'regionFill'],
name: "type",
path: ["type"],
type: "string",
states: {
"Line": [0, 1, 0, 0],
"Dots": [1, 0, 0, 0],
"HeatLine": [0, 1, 1, 0],
"Region": [0, 1, 0, 1]
"Mixed": 'axis-mixed',
"Line": 'line',
"Bar": 'bar',
"Pie Chart": 'pie',
"Percentage Chart": 'percentage'
},
activeState: "HeatLine"
activeState: "Mixed"
}],
actions: [{ name: "Export ...", fn: "export", args: [] }]
}]
@ -614,6 +618,34 @@ var dc = {
lang: "javascript",
content: ' let heatmap = new frappe.Chart("#heatmap", {\n type: \'heatmap\',\n title: "Monthly Distribution",\n data: {\n dataPoints: {\'1524064033\': 8, /* ... */},\n // object with timestamp-value pairs\n start: startDate\n end: endDate // Date objects\n },\n countLabel: \'Level\',\n discreteDomains: 0 // default: 1\n colors: [\'#ebedf0\', \'#c0ddf9\', \'#73b3f3\', \'#3886e1\', \'#17459e\'],\n // Set of five incremental colors,\n // preferably with a low-saturation color for zero data;\n // def: [\'#ebedf0\', \'#c6e48b\', \'#7bc96f\', \'#239a3b\', \'#196127\']\n });'
}]
},
codePenDemo: {
title: "Demo",
contentBlocks: [{
type: "custom",
html: '<p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"\n data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">\n See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>\n by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on\n <a href="https://codepen.io">CodePen</a>.\n </p>'
}]
},
optionsList: {
title: "Available Options",
contentBlocks: [{
type: "code",
lang: "javascript",
content: '\n ...\n {\n data: {\n labels: [],\n datasets: [],\n yRegions: [],\n yMarkers: []\n }\n title: \'\',\n colors: [],\n height: 200,\n\n tooltipOptions: {\n formatTooltipX: d => (d + \'\').toUpperCase(),\n formatTooltipY: d => d + \' pts\',\n }\n\n // Axis charts\n isNavigable: 1, // default: 0\n valuesOverPoints: 1, // default: 0\n barOptions: {\n spaceRatio: 1 // default: 0.5\n stacked: 1 // default: 0\n }\n\n lineOptions: {\n dotSize: 6, // default: 4\n hideLine: 0, // default: 0\n hideDots: 1, // default: 0\n heatline: 1, // default: 0\n regionFill: 1 // default: 0\n }\n\n axisOptions: {\n yAxisMode: \'span\', // Axis lines, default\n xAxisMode: \'tick\', // No axis lines, only short ticks\n xIsSeries: 1 // Allow skipping x values for space\n // default: 0\n },\n\n // Pie/Percentage charts\n maxLegendPoints: 6, // default: 20\n maxSlices: 10, // default: 20\n\n // Percentage chart\n barOptions: {\n height: 15 // default: 20\n depth: 5 // default: 2\n }\n\n // Heatmap\n discreteDomains: 1, // default: 1\n }\n ...\n\n // Updating values\n chart.update(data);\n\n // Axis charts:\n chart.addDataPoint(label, valueFromEachDataset, index)\n chart.removeDataPoint(index)\n chart.updateDataset(datasetValues, index)\n\n // Exporting\n chart.export();\n\n // Unbind window-resize events\n chart.unbindWindowEvents();\n\n '
}]
},
installation: {
title: "Install",
contentBlocks: [{ type: "text", content: 'Install via npm' }, { type: "code", lang: "console", content: ' npm install frappe-charts' }, { type: "text", content: 'And include it in your project' }, { type: "code", lang: "javascript", content: ' import { Chart } from "frappe-charts' }, { type: "text", content: 'Use as:' }, {
type: "code",
lang: "javascript",
content: ' new Chart(); // ES6 module\n // or\n new frappe.Chart(); // Browser'
}, { type: "text", content: '... or include it directly in your HTML' }, {
type: "code",
lang: "html",
content: ' &lt;script src="https://unpkg.com/frappe-charts@1.1.0"&gt;&lt;/script&gt;'
}]
}
};
@ -658,30 +690,37 @@ var docSectionBuilder = function () {
}, {
key: 'getBlock',
value: function getBlock(blockConf) {
var block = void 0;
var type = blockConf.type;
if (type === "text") {
block = this.getText(blockConf);
} else if (type === "code") {
block = this.getCode(blockConf);
var fnName = 'get' + toTitleCase(blockConf.type);
if (this[fnName]) {
return this[fnName](blockConf);
} else {
block = this.getDemo(blockConf);
throw new Error('Unknown section block type \'' + blockConf.type + '\'.');
}
}
}, {
key: 'getText',
value: function getText(blockConf) {}
value: function getText(blockConf) {
return $.create('p', {
inside: this.section,
innerHTML: blockConf.content
});
}
}, {
key: 'getCode',
value: function getCode(blockConf) {
var pre = $.create('pre', { inside: this.section });
var lang = blockConf.lang || 'javascript';
var code = $.create('code', {
inside: pre,
className: 'hljs ' + blockConf.lang,
className: 'hljs ' + lang,
innerHTML: blockConf.content
});
}
}, {
key: 'getCustom',
value: function getCustom(blockConf) {
this.section.innerHTML += blockConf.html;
}
}, {
key: 'getDemo',
value: function getDemo(blockConf) {
@ -723,7 +762,7 @@ var docSectionBuilder = function () {
args[o.path[0]][attr] = state[i];
});
} else {
// boolean, number, object
// boolean, string, number, object
args[o.path[0]] = state;
}
_this2.libObj = new _this2.LIB_OBJ(figure, args);
@ -770,63 +809,10 @@ lineComposite.parent.addEventListener('data-select', function (e) {
barComposite.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
});
// ================================================================================
var customColors = ['purple', 'magenta', 'light-blue'];
var typeChartArgs = {
title: "My Awesome Chart",
data: typeData,
type: 'axis-mixed',
height: 300,
colors: customColors,
valuesOverPoints: 1,
// maxLegendPoints: 6,
maxSlices: 10,
tooltipOptions: {
formatTooltipX: function formatTooltipX(d) {
return (d + '').toUpperCase();
},
formatTooltipY: function formatTooltipY(d) {
return d + ' pts';
}
}
};
var aggrChart = new Chart("#chart-aggr", typeChartArgs);
Array.prototype.slice.call(document.querySelectorAll('.aggr-type-buttons button')).map(function (el) {
el.addEventListener('click', function (e) {
var btn = e.target;
var type = btn.getAttribute('data-type');
typeChartArgs.type = type;
if (type !== 'axis-mixed') {
typeChartArgs.colors = undefined;
} else {
typeChartArgs.colors = customColors;
}
if (type !== 'percentage') {
typeChartArgs.height = 300;
} else {
typeChartArgs.height = undefined;
}
var newChart = new Chart("#chart-aggr", typeChartArgs);
if (newChart) {
aggrChart = newChart;
}
Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
el.classList.remove('active');
});
btn.classList.add('active');
});
});
document.querySelector('.export-aggr').addEventListener('click', function () {
aggrChart.export();
});
var section = document.querySelector('.demo-main');
dcb.setParent(section);
dcb.setSys(dc.demoMain);
dcb.make();
// Update values chart
// ================================================================================
@ -920,7 +906,7 @@ document.querySelector('.export-update').addEventListener('click', function () {
// Trends Chart
// ================================================================================
var section = document.querySelector('.trends-plot');
section = document.querySelector('.trends-plot');
dcb.setParent(section);
dcb.setSys(dc.trendsPlot);
dcb.make();
@ -963,4 +949,19 @@ dcb.setParent(section);
dcb.setSys(dc.heatmap);
dcb.make();
section = document.querySelector('.codepen');
dcb.setParent(section);
dcb.setSys(dc.codePenDemo);
dcb.make();
section = document.querySelector('.options');
dcb.setParent(section);
dcb.setSys(dc.optionsList);
dcb.make();
section = document.querySelector('.installation');
dcb.setParent(section);
dcb.setSys(dc.installation);
dcb.make();
}());

159
docs/index.html
View File

@ -32,61 +32,7 @@
<figure id="bar-composite-1" class="border"></figure>
</header>
<section>
<h6>Create a chart</h6>
<p>Click or use arrow keys to navigate data points</p>
<pre><code class="hljs html"> &lt!--HTML--&gt;
&lt;figure id="frost-chart"&gt;&lt;/figure&gt;</code></pre>
<pre><code class="hljs javascript"> // Javascript
let chart = new frappe.Chart( "#frost-chart", { // or DOM element
data: {
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
datasets: [
{
name: "Some Data", chartType: 'bar',
values: [25, 40, 30, 35, 8, 52, 17, -4]
},
{
name: "Another Set", chartType: 'bar',
values: [25, 50, -10, 15, 18, 32, 27, 14]
},
{
name: "Yet Another", chartType: 'line',
values: [15, 20, -3, -15, 58, 12, -17, 37]
}
],
yMarkers: [{ label: "Marker", value: 70,
options: { labelPos: 'left' }}],
yRegions: [{ label: "Region", start: -10, end: 50,
options: { labelPos: 'right' }}]
},
title: "My Awesome Chart",
type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage'
height: 300,
colors: ['purple', '#ffa3ef', 'light-blue'],
tooltipOptions: {
formatTooltipX: d => (d + '').toUpperCase(),
formatTooltipY: d => d + ' pts',
}
});
chart.export();
</code></pre>
<div id="chart-aggr" class="border"></div>
<div class="btn-group aggr-type-buttons mt1 mx-auto" role="group">
<button type="button" class="btn btn-sm btn-secondary active" data-type='axis-mixed'>Mixed</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>
</div>
<button type="button" class="btn btn-sm btn-secondary export-aggr mt1">Export ...</button>
</section>
<section class="demo-main"></section>
<section>
<h6>Update Values</h6>
@ -131,105 +77,9 @@
<section class="heatmap"></section>
<section>
<h6>Demo</h6>
<p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"
data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">
See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>
by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on
<a href="https://codepen.io">CodePen</a>.
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</section>
<section>
<h6>Available options</h6>
<pre><code class="hljs javascript">
...
{
data: {
labels: [],
datasets: [],
yRegions: [],
yMarkers: []
}
title: '',
colors: [],
height: 200,
tooltipOptions: {
formatTooltipX: d => (d + '').toUpperCase(),
formatTooltipY: d => d + ' pts',
}
// Axis charts
isNavigable: 1, // default: 0
valuesOverPoints: 1, // default: 0
barOptions: {
spaceRatio: 1 // default: 0.5
stacked: 1 // default: 0
}
lineOptions: {
dotSize: 6, // default: 4
hideLine: 0, // default: 0
hideDots: 1, // default: 0
heatline: 1, // default: 0
regionFill: 1 // default: 0
}
axisOptions: {
yAxisMode: 'span', // Axis lines, default
xAxisMode: 'tick', // No axis lines, only short ticks
xIsSeries: 1 // Allow skipping x values for space
// default: 0
},
// Pie/Percentage charts
maxLegendPoints: 6, // default: 20
maxSlices: 10, // default: 20
// Percentage chart
barOptions: {
height: 15 // default: 20
depth: 5 // default: 2
}
// Heatmap
discreteDomains: 1, // default: 1
}
...
// Updating values
chart.update(data);
// Axis charts:
chart.addDataPoint(label, valueFromEachDataset, index)
chart.removeDataPoint(index)
chart.updateDataset(datasetValues, index)
// Exporting
chart.export();
// Unbind window-resize events
chart.unbindWindowEvents();
</code></pre>
</section>
<section>
<h6>Install</h6>
<p>Install via npm</p>
<pre><code class="hljs console"> npm install frappe-charts</code></pre>
<p>And include it in your project</p>
<pre><code class="hljs javascript"> import { Chart } from "frappe-charts"</code></pre>
<p>... or include it directly in your HTML</p>
<pre><code class="hljs html"> &lt;script src="https://unpkg.com/frappe-charts@1.1.0"&gt;&lt;/script&gt;</code></pre>
<p>Use as:</p>
<pre><code class="hljs javascript"> new Chart(); // ES6 module
// or
new frappe.Chart(); // Browser</code></pre>
</section>
<section class="codepen"></section>
<section class="options"></section>
<section class="installation"></section>
<section class="text-center">
<!-- Closing -->
@ -266,6 +116,7 @@
</svg>
</a>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<script src="assets/js/frappe-charts.min.js"></script>
<script src="assets/js/index.min.js"></script>
</body>

4
src/js/utils/helpers.js
View File

@ -92,3 +92,7 @@ export function getPositionByAngle(angle, radius) {
y: Math.cos(angle * ANGLE_RATIO) * radius,
};
}
export function toTitleCase(str) {
return str.replace(/\w*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}