${d.n}
- ${arrow} ${d.d}
+ ${arrow} ${d.d}
${d.v}
${d.p}
@@ -438,49 +373,32 @@ function seg(key) {
}).join('');
requestAnimationFrame(() => g.querySelectorAll('.kpi').forEach(c => c.classList.add('visible')));
- // Main chart area
- const mcDom = document.getElementById('charts-main');
- const mc = s.mc;
- if (!charts.mc) charts.mc = echarts.init(document.createElement('div'));
- mcDom.innerHTML = `
-
`;
-
// Main chart
+ document.getElementById('mc-title').textContent = s.mc.title;
+ document.getElementById('mc-sub').textContent = s.mc.sub;
const mcEl = document.getElementById('mc-canvas');
- charts.mc.dispose();
- charts.mc = echarts.init(mcEl);
+ if (!charts.mc) charts.mc = echarts.init(mcEl);
+ charts.mc.clear();
let mcOpt;
- if (mc.type === 'dual') {
+ if (s.mc.type === 'dual') {
mcOpt = {
- tooltip: { trigger: 'axis', backgroundColor: '#161616', borderColor: '#262626', textStyle: { color: '#f4f4f4', fontSize: 12, fontFamily: 'IBM Plex Mono' } },
- legend: { data: ['Доход', 'Расход'], textStyle: { color: '#6f6f6f', fontSize: 11, fontFamily: 'IBM Plex Sans' }, top: 0, itemWidth: 12, itemHeight: 2 },
+ tooltip: { trigger: 'axis', backgroundColor: '#161616', borderColor: '#262626', textStyle: { color: '#f4f4f4', fontSize: 12 } },
+ legend: { data: ['Доход', 'Расход'], textStyle: { color: '#6f6f6f', fontSize: 11 }, top: 0, itemWidth: 12, itemHeight: 2 },
grid: { left: 48, right: 20, top: 32, bottom: 28 },
xAxis: {
- type: 'category', data: mc.labels,
+ type: 'category', data: s.mc.labels,
axisLine: { lineStyle: { color: '#262626' } },
- axisLabel: { color: '#6f6f6f', fontSize: 11, fontFamily: 'IBM Plex Mono' },
+ axisLabel: { color: '#6f6f6f', fontSize: 11 },
axisTick: { show: false },
},
yAxis: {
type: 'value',
splitLine: { lineStyle: { color: '#1f1f1f' } },
- axisLabel: { color: '#6f6f6f', fontSize: 11, fontFamily: 'IBM Plex Mono', formatter: '{value}М' },
+ axisLabel: { color: '#6f6f6f', fontSize: 11, formatter: '{value}М' },
},
series: [
{
- name: 'Доход', type: 'line', data: mc.rev, smooth: 0.4, symbol: 'none',
+ name: 'Доход', type: 'line', data: s.mc.rev, smooth: 0.4, symbol: 'none',
lineStyle: { width: 2.5, color: '#16a34a' },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -490,58 +408,54 @@ function seg(key) {
}
},
{
- name: 'Расход', type: 'line', data: mc.ads, smooth: 0.4, symbol: 'none',
+ name: 'Расход', type: 'line', data: s.mc.ads, smooth: 0.4, symbol: 'none',
lineStyle: { width: 1.5, color: '#0f6fff', type: 'dashed' },
},
],
animationDuration: 500,
- animationEasing: 'cubicOut',
};
} else {
mcOpt = {
- tooltip: { trigger: 'axis', backgroundColor: '#161616', borderColor: '#262626', textStyle: { color: '#f4f4f4', fontSize: 12, fontFamily: 'IBM Plex Mono' } },
- legend: { data: ['План', 'Факт'], textStyle: { color: '#6f6f6f', fontSize: 11, fontFamily: 'IBM Plex Sans' }, top: 0, itemWidth: 12, itemHeight: 14 },
+ tooltip: { trigger: 'axis', backgroundColor: '#161616', borderColor: '#262626', textStyle: { color: '#f4f4f4', fontSize: 12 } },
+ legend: { data: ['План', 'Факт'], textStyle: { color: '#6f6f6f', fontSize: 11 }, top: 0, itemWidth: 12, itemHeight: 14 },
grid: { left: 48, right: 20, top: 32, bottom: 28 },
xAxis: {
- type: 'category', data: mc.labels,
+ type: 'category', data: s.mc.labels,
axisLine: { lineStyle: { color: '#262626' } },
- axisLabel: { color: '#6f6f6f', fontSize: 11, fontFamily: 'IBM Plex Mono' },
+ axisLabel: { color: '#6f6f6f', fontSize: 11 },
},
yAxis: {
type: 'value',
splitLine: { lineStyle: { color: '#1f1f1f' } },
- axisLabel: { color: '#6f6f6f', fontSize: 11, fontFamily: 'IBM Plex Mono', formatter: '{value}К' },
+ axisLabel: { color: '#6f6f6f', fontSize: 11, formatter: '{value}К' },
},
series: [
- { name: 'План', type: 'bar', data: mc.plan, barWidth: '30%', itemStyle: { color: 'rgba(15,111,255,0.1)' } },
- { name: 'Факт', type: 'bar', data: mc.fact, barWidth: '30%', itemStyle: { color: '#0f6fff' } },
+ { name: 'План', type: 'bar', data: s.mc.plan, barWidth: '30%', itemStyle: { color: 'rgba(15,111,255,0.1)' } },
+ { name: 'Факт', type: 'bar', data: s.mc.fact, barWidth: '30%', itemStyle: { color: '#0f6fff' } },
],
animationDuration: 500,
- animationEasing: 'cubicOut',
};
}
- charts.mc.setOption(mcOpt, true);
+ charts.mc.setOption(mcOpt);
// Side chart
- const sc = s.sc;
- const scEl = document.getElementById('sc-canvas');
- if (!charts.sc) charts.sc = echarts.init(scEl);
- charts.sc.dispose();
- charts.sc = echarts.init(scEl);
- const scData = sc.data.reverse();
+ document.getElementById('sc-title').textContent = s.sc.title;
+ document.getElementById('sc-sub').textContent = s.sc.sub;
+ const scData = s.sc.data.slice().reverse();
const scColors = ['#0f6fff', '#3d8eff', '#16a34a', '#06b6d4', '#a855f7', '#eac518'];
- const scOpt = {
- tooltip: { trigger: 'axis', backgroundColor: '#161616', borderColor: '#262626', textStyle: { color: '#f4f4f4', fontSize: 11 } },
+ if (!charts.sc) charts.sc = echarts.init(document.getElementById('sc-canvas'));
+ charts.sc.clear();
+ charts.sc.setOption({
grid: { left: 90, right: 28, top: 8, bottom: 8 },
xAxis: {
type: 'value',
splitLine: { lineStyle: { color: '#1f1f1f' } },
- axisLabel: { color: '#6f6f6f', fontSize: 10, fontFamily: 'IBM Plex Mono', formatter: '{value}%' },
+ axisLabel: { color: '#6f6f6f', fontSize: 10, formatter: '{value}%' },
},
yAxis: {
type: 'category', data: scData.map(d => d.n),
axisLine: { lineStyle: { color: '#262626' } },
- axisLabel: { color: '#a6a6a6', fontSize: 11, fontFamily: 'IBM Plex Sans' },
+ axisLabel: { color: '#a6a6a6', fontSize: 11 },
},
series: [{
type: 'bar', data: scData.map((d, i) => ({
@@ -556,120 +470,66 @@ function seg(key) {
barWidth: 28,
}],
animationDuration: 500,
- };
- charts.sc.setOption(scOpt, true);
-
- // Sub row charts
- const subEl = document.getElementById('charts-sub');
- const c1 = s.c1;
- const c2 = s.c2;
-
- // Funnel chart
- let funnelHtml = `
`;
-
- // Second chart
- let secondHtml;
- if (c2.labels) {
- const isPie = c2.data.length && c2.data.reduce((a, b) => a + b, 0) <= 100;
- const pc = ['#0f6fff', '#16a34a', '#eac518', '#a855f7', '#e21d1d'];
- if (isPie) {
- secondHtml = `
`;
- } else {
- secondHtml = `
`;
- }
- }
-
- // Metrics panel
- const metricsHtml = `
`;
-
- subEl.innerHTML = funnelHtml + secondHtml + metricsHtml;
+ });
// Funnel
+ document.getElementById('c1-title').textContent = s.c1.title;
+ document.getElementById('c1-sub').textContent = s.c1.sub;
const fc = ['#0f6fff', '#3d8eff', '#16a34a', '#e21d1d'];
- const c1Dom = document.getElementById('c1-canvas');
- if (!charts.c1) charts.c1 = echarts.init(c1Dom);
- charts.c1.dispose();
- charts.c1 = echarts.init(c1Dom);
+ if (!charts.c1) charts.c1 = echarts.init(document.getElementById('c1-canvas'));
+ charts.c1.clear();
charts.c1.setOption({
- tooltip: { trigger: 'item', backgroundColor: '#161616', borderColor: '#262626', textStyle: { color: '#f4f4f4', fontSize: 11 } },
series: [{
- type: 'funnel', left: '8%', bottom: 5, width: '84%', min: 0, max: c1.data[0].v,
+ type: 'funnel', left: '8%', bottom: 5, width: '84%', min: 0, max: s.c1.data[0].v,
minSize: '0%', maxSize: '100%', sort: 'descending', gap: 2,
- label: { show: true, position: 'inside', color: '#f4f4f4', fontSize: 11, fontFamily: 'IBM Plex Mono', formatter: '{b}\n{d}%' },
+ label: { show: true, position: 'inside', color: '#f4f4f4', fontSize: 11, formatter: '{b}\n{d}%' },
labelLine: { show: false },
itemStyle: { borderColor: '#161616', borderWidth: 2 },
- data: c1.data.map((d, i) => ({ name: d.n, value: d.v, itemStyle: { color: fc[i % fc.length] } })),
+ data: s.c1.data.map((d, i) => ({ name: d.n, value: d.v, itemStyle: { color: fc[i % fc.length] } })),
}],
animationDuration: 500,
- }, true);
+ });
// Second chart
- const c2Dom = document.getElementById('c2-canvas');
- if (!charts.c2) charts.c2 = echarts.init(c2Dom);
- charts.c2.dispose();
- charts.c2 = echarts.init(c2Dom);
- if (c2.labels) {
- const isPie = c2.data.length && c2.data.reduce((a, b) => a + b, 0) <= 100;
- const pc = ['#0f6fff', '#16a34a', '#eac518', '#a855f7', '#e21d1d'];
- if (isPie) {
- charts.c2.setOption({
- tooltip: { trigger: 'item', backgroundColor: '#161616', borderColor: '#262626', textStyle: { color: '#f4f4f4', fontSize: 11 } },
- series: [{
- type: 'pie', radius: ['40%', '65%'], center: ['50%', '55%'],
- itemStyle: { borderRadius: 0, borderColor: '#161616', borderWidth: 2 },
- label: { show: false }, labelLine: { show: false },
- data: c2.labels.map((l, i) => ({ name: l, value: c2.data[i], itemStyle: { color: pc[i % pc.length] } })),
- }],
- animationDuration: 500,
- }, true);
- } else {
- charts.c2.setOption({
- tooltip: { trigger: 'axis', backgroundColor: '#161616', borderColor: '#262626', textStyle: { color: '#f4f4f4', fontSize: 11 } },
- grid: { left: 60, right: 16, top: 8, bottom: 28 },
- xAxis: {
- type: 'value',
- splitLine: { lineStyle: { color: '#1f1f1f' } },
- axisLabel: { color: '#6f6f6f', fontSize: 10, formatter: '{value}%' },
- },
- yAxis: {
- type: 'category', data: c2.labels,
- axisLine: { lineStyle: { color: '#262626' } },
- axisLabel: { color: '#a6a6a6', fontSize: 11, fontFamily: 'IBM Plex Sans' },
- },
- series: [{
- type: 'bar', data: c2.data.map(v => ({
- value: v,
- itemStyle: { color: v >= 100 ? '#16a34a' : '#eac518' }
- })),
- barWidth: 24,
- }],
- animationDuration: 500,
- }, true);
- }
+ document.getElementById('c2-title').textContent = s.c2.title;
+ document.getElementById('c2-sub').textContent = s.c2.sub;
+ const c2 = s.c2;
+ const isPie = c2.labels && c2.data.reduce((a, b) => a + b, 0) <= 100;
+ const pc = ['#0f6fff', '#16a34a', '#eac518', '#a855f7', '#e21d1d'];
+ if (!charts.c2) charts.c2 = echarts.init(document.getElementById('c2-canvas'));
+ charts.c2.clear();
+ if (isPie) {
+ charts.c2.setOption({
+ series: [{
+ type: 'pie', radius: ['40%', '65%'], center: ['50%', '55%'],
+ itemStyle: { borderRadius: 0, borderColor: '#161616', borderWidth: 2 },
+ label: { show: false }, labelLine: { show: false },
+ data: c2.labels.map((l, i) => ({ name: l, value: c2.data[i], itemStyle: { color: pc[i % pc.length] } })),
+ }],
+ animationDuration: 500,
+ });
+ } else {
+ charts.c2.setOption({
+ grid: { left: 60, right: 16, top: 8, bottom: 28 },
+ xAxis: {
+ type: 'value',
+ splitLine: { lineStyle: { color: '#1f1f1f' } },
+ axisLabel: { color: '#6f6f6f', fontSize: 10, formatter: '{value}%' },
+ },
+ yAxis: {
+ type: 'category', data: c2.labels,
+ axisLine: { lineStyle: { color: '#262626' } },
+ axisLabel: { color: '#a6a6a6', fontSize: 11 },
+ },
+ series: [{
+ type: 'bar', data: c2.data.map(v => ({
+ value: v,
+ itemStyle: { color: v >= 100 ? '#16a34a' : '#eac518' }
+ })),
+ barWidth: 24,
+ }],
+ animationDuration: 500,
+ });
}
// Metrics list
@@ -699,7 +559,7 @@ document.addEventListener('DOMContentLoaded', () => {
String(n.getHours()).padStart(2, '0') + ':' + String(n.getMinutes()).padStart(2, '0') + ':' + String(n.getSeconds()).padStart(2, '0');
}
tick(); setInterval(tick, 1000);
- new ResizeObserver(() => Object.values(charts).forEach(c => c.resize())).observe(document.getElementById('charts-wrap'));
+ new ResizeObserver(() => Object.values(charts).forEach(c => c.resize())).observe(document.querySelector('.charts-grid'));
});