@toast-ui/chart
Advanced tools
Comparing version 4.0.1 to 4.0.2
@@ -129,2 +129,3 @@ import Chart from "./chart"; | ||
this.addData = (data, category) => { | ||
this.resetSeries(); | ||
this.animationControlFlag.updating = true; | ||
@@ -182,2 +183,3 @@ this.store.dispatch('addData', { data, category }); | ||
this.setOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('initOptions', options); | ||
@@ -201,2 +203,3 @@ }; | ||
this.updateOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('updateOptions', options); | ||
@@ -270,2 +273,3 @@ }; | ||
addSeries(data) { | ||
this.resetSeries(); | ||
this.store.dispatch('addSeries', { data }); | ||
@@ -294,2 +298,3 @@ } | ||
const { categories, series } = data; | ||
this.resetSeries(); | ||
this.store.dispatch('setData', { series: { area: series }, categories }); | ||
@@ -296,0 +301,0 @@ } |
@@ -125,2 +125,3 @@ import Chart from "./chart"; | ||
this.animationControlFlag.updating = true; | ||
this.resetSeries(); | ||
this.store.dispatch('addData', { data, category }); | ||
@@ -177,2 +178,3 @@ }; | ||
this.setOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('initOptions', options); | ||
@@ -196,2 +198,3 @@ }; | ||
this.updateOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('updateOptions', options); | ||
@@ -267,2 +270,3 @@ }; | ||
addSeries(data) { | ||
this.resetSeries(); | ||
this.store.dispatch('addSeries', { data }); | ||
@@ -291,4 +295,5 @@ } | ||
const { categories, series } = data; | ||
this.resetSeries(); | ||
this.store.dispatch('setData', { series: { bar: series }, categories }); | ||
} | ||
} |
@@ -116,2 +116,3 @@ import Chart from "./chart"; | ||
this.animationControlFlag.updating = true; | ||
this.resetSeries(); | ||
this.store.dispatch('addData', { data, category }); | ||
@@ -146,2 +147,3 @@ }; | ||
this.setOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('initOptions', options); | ||
@@ -165,2 +167,3 @@ }; | ||
this.updateOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('updateOptions', options); | ||
@@ -234,2 +237,3 @@ }; | ||
addSeries(data) { | ||
this.resetSeries(); | ||
this.store.dispatch('addSeries', { data }); | ||
@@ -260,4 +264,5 @@ } | ||
const { categories, series } = data; | ||
this.resetSeries(); | ||
this.store.dispatch('setData', { series: { boxPlot: series }, categories }); | ||
} | ||
} |
@@ -118,2 +118,3 @@ import Chart from "./chart"; | ||
this.animationControlFlag.updating = true; | ||
this.resetSeries(); | ||
this.store.dispatch('addData', { data }); | ||
@@ -148,2 +149,3 @@ }; | ||
this.setOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('initOptions', options); | ||
@@ -167,2 +169,3 @@ }; | ||
this.updateOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('updateOptions', options); | ||
@@ -233,2 +236,3 @@ }; | ||
addSeries(data) { | ||
this.resetSeries(); | ||
this.store.dispatch('addSeries', { data }); | ||
@@ -254,4 +258,5 @@ } | ||
setData(data) { | ||
this.resetSeries(); | ||
this.store.dispatch('setData', { series: { bubble: data.series } }); | ||
} | ||
} |
@@ -156,2 +156,3 @@ import Chart from "./chart"; | ||
this.setOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('initOptions', options); | ||
@@ -175,2 +176,3 @@ }; | ||
this.updateOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('updateOptions', options); | ||
@@ -245,2 +247,3 @@ }; | ||
addSeries(data) { | ||
this.resetSeries(); | ||
this.store.dispatch('addSeries', { data }); | ||
@@ -269,4 +272,5 @@ } | ||
setData(data) { | ||
this.resetSeries(); | ||
this.store.dispatch('setData', { series: { bullet: data.series } }); | ||
} | ||
} |
@@ -135,4 +135,5 @@ import Store from "../store/store"; | ||
setTooltipOffset(offset: Partial<Point>): void; | ||
resetSeries: () => void; | ||
private setResizeEventListeners; | ||
protected dispatchOptionsEvent(eventName: 'initOptions' | 'updateOptions', options: Options): void; | ||
} |
@@ -220,4 +220,9 @@ import Store from "../store/store"; | ||
this.resize = (size) => { | ||
this.resetSeries(); | ||
this.store.dispatch('updateOptions', { options: { chart: Object.assign({}, size) } }); | ||
}; | ||
this.resetSeries = () => { | ||
this.eventBus.emit('resetHoveredSeries'); | ||
this.eventBus.emit('resetSelectedSeries'); | ||
}; | ||
this.setResizeEventListeners = (eventName, options) => { | ||
@@ -319,3 +324,4 @@ var _a, _b, _c, _d; | ||
} | ||
this.eventBus.emit('resetHoveredSeries'); | ||
// @TODO: For updates where the data doesn't change, it looks good to recalculate the selected series position. | ||
this.resetSeries(); | ||
this.store.dispatch('setChartSize', { | ||
@@ -322,0 +328,0 @@ width: usingContainerWidth ? containerWidth : width, |
@@ -125,2 +125,3 @@ import Chart from "./chart"; | ||
this.animationControlFlag.updating = true; | ||
this.resetSeries(); | ||
this.store.dispatch('addData', { data, category }); | ||
@@ -177,2 +178,3 @@ }; | ||
this.setOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('initOptions', options); | ||
@@ -196,2 +198,3 @@ }; | ||
this.updateOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('updateOptions', options); | ||
@@ -263,2 +266,3 @@ }; | ||
addSeries(data) { | ||
this.resetSeries(); | ||
this.store.dispatch('addSeries', { data }); | ||
@@ -287,4 +291,5 @@ } | ||
const { categories, series } = data; | ||
this.resetSeries(); | ||
this.store.dispatch('setData', { series: { column: series }, categories }); | ||
} | ||
} |
@@ -135,2 +135,3 @@ import Chart from "./chart"; | ||
this.animationControlFlag.updating = true; | ||
this.resetSeries(); | ||
this.store.dispatch('addData', { data, category, chartType }); | ||
@@ -190,2 +191,3 @@ }; | ||
this.setOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('initOptions', options); | ||
@@ -211,2 +213,3 @@ }; | ||
this.updateOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('updateOptions', options); | ||
@@ -293,2 +296,3 @@ }; | ||
addSeries(data, dataInfo) { | ||
this.resetSeries(); | ||
this.store.dispatch('addSeries', Object.assign({ data }, dataInfo)); | ||
@@ -320,2 +324,3 @@ } | ||
setData(data) { | ||
this.resetSeries(); | ||
this.store.dispatch('setData', data); | ||
@@ -322,0 +327,0 @@ } |
@@ -124,2 +124,3 @@ import Chart from "./chart"; | ||
this.animationControlFlag.updating = true; | ||
this.resetSeries(); | ||
this.store.dispatch('addData', { data, category }); | ||
@@ -142,2 +143,3 @@ }; | ||
this.addSeries = (data, dataInfo) => { | ||
this.resetSeries(); | ||
this.store.dispatch('addHeatmapSeries', Object.assign({ data }, dataInfo)); | ||
@@ -193,2 +195,3 @@ }; | ||
this.setOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('initOptions', options); | ||
@@ -212,2 +215,3 @@ }; | ||
this.updateOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('updateOptions', options); | ||
@@ -283,2 +287,3 @@ }; | ||
const { categories, series } = data; | ||
this.resetSeries(); | ||
this.store.dispatch('setData', { | ||
@@ -285,0 +290,0 @@ series: { heatmap: getSeriesWithYCategory(series, categories) }, |
@@ -130,2 +130,3 @@ import Chart from "./chart"; | ||
this.animationControlFlag.updating = true; | ||
this.resetSeries(); | ||
this.store.dispatch('addData', { data, category, chartType }); | ||
@@ -152,2 +153,3 @@ }; | ||
this.addSeries = (data, dataInfo) => { | ||
this.resetSeries(); | ||
this.store.dispatch('addSeries', Object.assign({ data }, dataInfo)); | ||
@@ -207,2 +209,3 @@ }; | ||
this.setOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('initOptions', options); | ||
@@ -228,2 +231,3 @@ }; | ||
this.updateOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('updateOptions', options); | ||
@@ -310,2 +314,3 @@ }; | ||
setData(data) { | ||
this.resetSeries(); | ||
this.store.dispatch('setData', data); | ||
@@ -312,0 +317,0 @@ } |
@@ -132,2 +132,3 @@ import Chart from "./chart"; | ||
} | ||
this.resetSeries(); | ||
this.store.dispatch('addData', { data, category }); | ||
@@ -184,2 +185,3 @@ }; | ||
this.setOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('initOptions', options); | ||
@@ -203,2 +205,3 @@ }; | ||
this.updateOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('updateOptions', options); | ||
@@ -272,2 +275,3 @@ }; | ||
addSeries(data) { | ||
this.resetSeries(); | ||
this.store.dispatch('addSeries', { data }); | ||
@@ -296,2 +300,3 @@ } | ||
const { categories, series } = data; | ||
this.resetSeries(); | ||
this.store.dispatch('setData', { series: { line: series }, categories }); | ||
@@ -298,0 +303,0 @@ } |
@@ -119,2 +119,3 @@ import Chart from "./chart"; | ||
this.animationControlFlag.updating = true; | ||
this.resetSeries(); | ||
this.store.dispatch('addData', { data, chartType }); | ||
@@ -141,2 +142,3 @@ }; | ||
this.addSeries = (data, dataInfo) => { | ||
this.resetSeries(); | ||
this.store.dispatch('addSeries', Object.assign({ data }, dataInfo)); | ||
@@ -174,2 +176,3 @@ }; | ||
this.setOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('initOptions', options); | ||
@@ -195,2 +198,3 @@ }; | ||
this.updateOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('updateOptions', options); | ||
@@ -276,4 +280,5 @@ }; | ||
setData(data) { | ||
this.resetSeries(); | ||
this.store.dispatch('setData', data); | ||
} | ||
} |
@@ -121,2 +121,3 @@ import Chart from "./chart"; | ||
this.setOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('initOptions', options); | ||
@@ -142,2 +143,3 @@ }; | ||
this.updateOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('updateOptions', options); | ||
@@ -212,2 +214,3 @@ }; | ||
addSeries(data, dataInfo) { | ||
this.resetSeries(); | ||
this.store.dispatch('addSeries', Object.assign({ data }, dataInfo)); | ||
@@ -256,2 +259,3 @@ this.componentManager.add(PieSeries, { alias: data.name }); | ||
this.componentManager.remove(PieSeries); | ||
this.resetSeries(); | ||
this.store.dispatch('setData', { series: { pie: data.series } }); | ||
@@ -258,0 +262,0 @@ (_a = this.store.initStoreState.series.pie, (_a !== null && _a !== void 0 ? _a : [])).forEach(({ name }) => { |
@@ -120,2 +120,3 @@ import Chart from "./chart"; | ||
this.setOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('initOptions', options); | ||
@@ -139,2 +140,3 @@ }; | ||
this.updateOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('updateOptions', options); | ||
@@ -197,2 +199,3 @@ }; | ||
addSeries(data) { | ||
this.resetSeries(); | ||
this.store.dispatch('addSeries', { data }); | ||
@@ -215,4 +218,5 @@ } | ||
const { categories, series } = data; | ||
this.resetSeries(); | ||
this.store.dispatch('setData', { series: { pie: series }, categories }); | ||
} | ||
} |
@@ -105,2 +105,3 @@ import Chart from "./chart"; | ||
this.animationControlFlag.updating = true; | ||
this.resetSeries(); | ||
this.store.dispatch('addData', { data, category }); | ||
@@ -146,2 +147,3 @@ }; | ||
this.updateOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('updateOptions', options); | ||
@@ -206,2 +208,3 @@ }; | ||
addSeries(data) { | ||
this.resetSeries(); | ||
this.store.dispatch('addSeries', { data }); | ||
@@ -230,4 +233,5 @@ } | ||
const { categories, series } = data; | ||
this.resetSeries(); | ||
this.store.dispatch('setData', { series: { radar: series }, categories }); | ||
} | ||
} |
@@ -135,2 +135,3 @@ import Chart from "./chart"; | ||
this.animationControlFlag.updating = true; | ||
this.resetSeries(); | ||
this.store.dispatch('addData', { data }); | ||
@@ -164,2 +165,3 @@ }; | ||
this.setOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('initOptions', options); | ||
@@ -183,2 +185,3 @@ }; | ||
this.updateOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('updateOptions', options); | ||
@@ -248,2 +251,3 @@ }; | ||
addSeries(data) { | ||
this.resetSeries(); | ||
this.store.dispatch('addSeries', { data }); | ||
@@ -270,4 +274,5 @@ } | ||
const { categories, series } = data; | ||
this.resetSeries(); | ||
this.store.dispatch('setData', { series: { scatter: series }, categories }); | ||
} | ||
} |
@@ -125,2 +125,3 @@ import Chart from "./chart"; | ||
this.setOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('initOptions', options); | ||
@@ -144,2 +145,3 @@ }; | ||
this.updateOptions = (options) => { | ||
this.resetSeries(); | ||
this.dispatchOptionsEvent('updateOptions', options); | ||
@@ -206,2 +208,3 @@ }; | ||
addSeries(data, dataInfo) { | ||
this.resetSeries(); | ||
this.store.dispatch('addTreemapSeries', Object.assign({ data }, dataInfo)); | ||
@@ -231,4 +234,5 @@ } | ||
setData(data) { | ||
this.resetSeries(); | ||
this.store.dispatch('setData', { series: { treemap: data.series } }); | ||
} | ||
} |
@@ -47,5 +47,5 @@ import Component from "./component"; | ||
applyExportButtonPanelStyle(chartWidth) { | ||
const exportMenu = this.exportMenuEl.querySelector('.export-menu'); | ||
const exportMenuTitle = this.exportMenuEl.querySelector('.export-menu-title'); | ||
const menuBtnWrapper = this.exportMenuEl.querySelector('.export-menu-btn-wrapper'); | ||
const exportMenu = this.exportMenuEl.querySelector('.toastui-chart-export-menu'); | ||
const exportMenuTitle = this.exportMenuEl.querySelector('.toastui-chart-export-menu-title'); | ||
const menuBtnWrapper = this.exportMenuEl.querySelector('.toastui-chart-export-menu-btn-wrapper'); | ||
exportMenu.setAttribute('style', this.makePanelWrapperStyle(chartWidth)); | ||
@@ -59,9 +59,9 @@ exportMenuTitle.setAttribute('style', this.makePanelStyle('header')); | ||
el.innerHTML = ` | ||
<div class="export-menu"> | ||
<p class="export-menu-title">Export to</p> | ||
<div class="export-menu-btn-wrapper"> | ||
<button class="export-menu-btn" id="xls">xls</button> | ||
<button class="export-menu-btn" id="csv">csv</button> | ||
<button class="export-menu-btn" id="png">png</button> | ||
<button class="export-menu-btn" id="jpeg">jpeg</button> | ||
<div class="toastui-chart-export-menu"> | ||
<p class="toastui-chart-export-menu-title">Export to</p> | ||
<div class="toastui-chart-export-menu-btn-wrapper"> | ||
<button class="toastui-chart-export-menu-btn" id="xls">xls</button> | ||
<button class="toastui-chart-export-menu-btn" id="csv">csv</button> | ||
<button class="toastui-chart-export-menu-btn" id="png">png</button> | ||
<button class="toastui-chart-export-menu-btn" id="jpeg">jpeg</button> | ||
</div> | ||
@@ -68,0 +68,0 @@ </div> |
@@ -24,2 +24,3 @@ import Component from "./component"; | ||
this.models = {}; | ||
this.store.dispatch('setAllLegendActiveState', true); | ||
}; | ||
@@ -26,0 +27,0 @@ } |
@@ -100,3 +100,3 @@ import Component from "./component"; | ||
this.tooltipContainerEl = document.createElement('div'); | ||
this.tooltipContainerEl.classList.add('tooltip-container'); | ||
this.tooltipContainerEl.classList.add('toastui-chart-tooltip-container'); | ||
const { width, height, top, left } = this.chartEl.getBoundingClientRect(); | ||
@@ -103,0 +103,0 @@ this.tooltipContainerEl.style.transform = getTranslateString(left + width / 2, top + height / 2); |
@@ -6,17 +6,17 @@ import { pieTooltipLabelFormatter } from "./pieSeries"; | ||
function getSeriesNameTemplate(label, color) { | ||
return `<span class="series-name"> | ||
<i class="icon" style="background: ${color}"></i> | ||
<span class="name">${label}</span> | ||
return `<span class="toastui-chart-series-name"> | ||
<i class="toastui-chart-icon" style="background: ${color}"></i> | ||
<span class="toastui-chart-name">${label}</span> | ||
</span>`; | ||
} | ||
function getTitleValueTemplate(title, value) { | ||
return `<div class="tooltip-series"> | ||
<span class="series-name">${title}</span> | ||
<span class="series-value">${value}</span> | ||
return `<div class="toastui-chart-tooltip-series"> | ||
<span class="toastui-chart-series-name">${title}</span> | ||
<span class="toastui-chart-series-value">${value}</span> | ||
</div>`; | ||
} | ||
function getColorValueTemplate(color, value) { | ||
return `<div class="tooltip-series"> | ||
<i class="icon" style="background: ${color}"></i> | ||
<span class="series-value">${value}</span> | ||
return `<div class="toastui-chart-tooltip-series"> | ||
<i class="toastui-chart-icon" style="background: ${color}"></i> | ||
<span class="toastui-chart-series-value">${value}</span> | ||
</div>`; | ||
@@ -42,15 +42,18 @@ } | ||
const style = `border: ${borderWidth}px ${borderStyle} ${borderColor};border-radius: ${borderRadius}px;background: ${background};`; | ||
return `<div class="tooltip" style="${style}">${header}${body}</div>`; | ||
return `<div class="toastui-chart-tooltip" style="${style}">${header}${body}</div>`; | ||
} | ||
export function getHeaderTemplate({ category }, theme) { | ||
return category | ||
? `<div class="tooltip-category" style="${getFontStyleString(theme.header)}">${category}</div>` | ||
? `<div class="toastui-chart-tooltip-category" style="${getFontStyleString(theme.header)}"> | ||
${category} | ||
</div>` | ||
: ''; | ||
} | ||
function getDefaultBodyTemplate({ data }, theme) { | ||
return `<div class="tooltip-series-wrapper" style="${getFontStyleString(theme.body)}"> | ||
return ` | ||
<div class="toastui-chart-tooltip-series-wrapper" style="${getFontStyleString(theme.body)}"> | ||
${data | ||
.map(({ label, color, formattedValue }) => `<div class="tooltip-series"> | ||
.map(({ label, color, formattedValue }) => `<div class="toastui-chart-tooltip-series"> | ||
${getSeriesNameTemplate(label, color)} | ||
<span class="series-value">${formattedValue}</span> | ||
<span class="toastui-chart-series-value">${formattedValue}</span> | ||
</div>`) | ||
@@ -70,14 +73,15 @@ .join('')} | ||
}, {}); | ||
return `<div class="tooltip-series-wrapper" style="${getFontStyleString(theme.body)}"> | ||
${[groupedData] | ||
.map(({ label, color, value: values }) => `<div class="tooltip-series"> | ||
${getSeriesNameTemplate(label, color)} | ||
</div> | ||
<div> | ||
${values | ||
return ` | ||
<div class="toastui-chart-tooltip-series-wrapper" style="${getFontStyleString(theme.body)}"> | ||
${[groupedData] | ||
.map(({ label, color, value: values }) => `<div class="toastui-chart-tooltip-series"> | ||
${getSeriesNameTemplate(label, color)} | ||
</div> | ||
<div> | ||
${values | ||
.map(({ title, formattedValue }) => getTitleValueTemplate(title, formattedValue)) | ||
.join('')} | ||
</div>`) | ||
</div>`) | ||
.join('')} | ||
</div>`; | ||
</div>`; | ||
} | ||
@@ -90,10 +94,11 @@ function getBulletTemplate({ data }, theme) { | ||
function getBulletBasicTemplate(data, theme) { | ||
return `<div class="tooltip-series-wrapper" style="${getFontStyleString(theme.body)}"> | ||
${data | ||
.map(({ label, color, value: values }) => `<div class="tooltip-series">${getSeriesNameTemplate(label, color)}</div> | ||
${values | ||
return ` | ||
<div class="toastui-chart-tooltip-series-wrapper" style="${getFontStyleString(theme.body)}"> | ||
${data | ||
.map(({ label, color, value: values }) => `<div class="toastui-chart-tooltip-series">${getSeriesNameTemplate(label, color)}</div> | ||
${values | ||
.map(({ title, formattedValue }) => getTitleValueTemplate(title, formattedValue)) | ||
.join('')}`) | ||
.join('')} | ||
</div>`; | ||
</div>`; | ||
} | ||
@@ -103,28 +108,31 @@ function getBulletGroupedTemplate(data, theme) { | ||
const [actual, ranges, markers] = ['Actual', 'Range', 'Marker'].map((titleType) => makeBulletDataTemplate(bulletData, titleType)); | ||
return `<div class="tooltip-category" style="${getFontStyleString(theme.header)}"> | ||
return `<div class="toastui-chart-tooltip-category" style="${getFontStyleString(theme.header)}"> | ||
${data[0].label} | ||
</div> | ||
<div class="tooltip-series-wrapper" style="${getFontStyleString(theme.body)}"> | ||
${actual ? '<div class="tooltip-title">Actual</div>' : ''} ${actual} | ||
${ranges ? '<div class="tooltip-title">Ranges</div>' : ''} ${ranges} | ||
${markers ? '<div class="tooltip-title">Markers</div>' : ''} ${markers} | ||
<div class="toastui-chart-tooltip-series-wrapper" style="${getFontStyleString(theme.body)}"> | ||
${actual ? '<div class="toastui-chart-tooltip-title">Actual</div>' : ''} ${actual} | ||
${ranges ? '<div class="toastui-chart-tooltip-title">Ranges</div>' : ''} ${ranges} | ||
${markers ? '<div class="toastui-chart-tooltip-title">Markers</div>' : ''} ${markers} | ||
</div>`; | ||
} | ||
function getPieTemplate({ data }, theme) { | ||
return `<div class="tooltip-series-wrapper" style="${getFontStyleString(theme.body)}"> | ||
${data | ||
.map(({ label, color, formattedValue, percentValue }) => `<div class="tooltip-series"> | ||
${getSeriesNameTemplate(label, color)} | ||
<span class="series-value">${pieTooltipLabelFormatter(percentValue)} (${formattedValue})</span> | ||
</div>`) | ||
return ` | ||
<div class="toastui-chart-tooltip-series-wrapper" style="${getFontStyleString(theme.body)}"> | ||
${data | ||
.map(({ label, color, formattedValue, percentValue }) => `<div class="toastui-chart-tooltip-series"> | ||
${getSeriesNameTemplate(label, color)} | ||
<span class="toastui-chart-series-value">${pieTooltipLabelFormatter(percentValue)} (${formattedValue})</span> | ||
</div>`) | ||
.join('')} | ||
</div>`; | ||
</div>`; | ||
} | ||
function getHeatmapTemplate({ data }, theme) { | ||
return `${data | ||
.map(({ label, color, formattedValue }) => `<div class="tooltip-category" style="${getFontStyleString(theme.header)}"> | ||
.map(({ label, color, formattedValue }) => `<div class="toastui-chart-tooltip-category" style="${getFontStyleString(theme.header)}"> | ||
${label} | ||
</div> | ||
<div class="tooltip-series-wrapper" style="${getFontStyleString(theme.body)}"> | ||
<div class="tooltip-series">${getSeriesNameTemplate(formattedValue, color)}</div> | ||
<div class="toastui-chart-tooltip-series-wrapper" style="${getFontStyleString(theme.body)}"> | ||
<div class="toastui-chart-tooltip-series"> | ||
${getSeriesNameTemplate(formattedValue, color)} | ||
</div> | ||
</div>`) | ||
@@ -131,0 +139,0 @@ .join('')}`; |
{ | ||
"name": "@toast-ui/chart", | ||
"version": "4.0.1", | ||
"version": "4.0.2", | ||
"description": "TOAST UI Application: Chart", | ||
@@ -136,3 +136,3 @@ "main": "dist/toastui-chart.js", | ||
}, | ||
"gitHead": "33a0fa3e0c0eba740948d07d21ecacb4f26e8a37" | ||
"gitHead": "2bdc00b5a76e02fc1ec3e1eb9b0ddb7a5151cab9" | ||
} |
@@ -5,3 +5,3 @@ # ![Toast UI Chart](https://user-images.githubusercontent.com/35218826/37320160-c4d6dec4-26b5-11e8-9a91-79bb2b882410.png) | ||
[![npm](https://img.shields.io/npm/v/tui-chart.svg)](https://www.npmjs.com/package/tui-chart) | ||
[![npm](https://img.shields.io/npm/v/@toast-ui/chart.svg)](https://www.npmjs.com/package/@toast-ui/chart) | ||
@@ -8,0 +8,0 @@ ## 🚩 Table of Contents |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
3142174
56480