fix: chart2/3/4 — дизайн как в оригинале
chart2: все бары красные, значение справа жирным chart3: все бары зелёные, буква группы под баром, значение +X% над баром chart4: левая=зелёные, правая=оранжевые, isHighlight=жёлтый (выбранный ФО)
This commit is contained in:
Alexey Pavlov
+74
-64
@@ -1,95 +1,105 @@
|
||||
/**
|
||||
* Chart 4 — Сравнение регионов: две вертикальные панели рядом.
|
||||
*
|
||||
* Левая панель (например «Лидеры по цене») и правая («Аутсайдеры»).
|
||||
* Общая шкала Y для честного визуального сравнения. Подсветка субъекта отчёта.
|
||||
* Левая панель: зелёные бары (лидеры).
|
||||
* Правая панель: оранжевые/светлые бары (аутсайдеры).
|
||||
* Выбранный субъект: жёлтый/оранжевый highlight (isHighlight=true).
|
||||
*
|
||||
* Параметры:
|
||||
* left: { title, bars: [{ label, value, isHighlight? }] }
|
||||
* right: { title, bars: [{ label, value, isHighlight? }] }
|
||||
* left: { title, bars: [{ label, value, isHighlight? }] }
|
||||
* right: { title, bars: [{ label, value, isHighlight? }] }
|
||||
* regionLabel: string
|
||||
* unit: string — по умолчанию 'руб./кг'
|
||||
* leftColor / rightColor — опционально (по умолчанию зелёный / оранжевый)
|
||||
* width: number
|
||||
* unit: string
|
||||
*/
|
||||
|
||||
const sharp = require('sharp')
|
||||
const { PALETTE } = require('../data/palette')
|
||||
const { red: RED, dark: DARK, mdGray: MDGRAY, ltGray: LTGRAY, grid: GRID,
|
||||
green: GREEN, orange: ORANGE, o: O } = PALETTE
|
||||
const { dark: DARK, mdGray: MDGRAY, ltGray: LTGRAY, grid: GRID, green: GREEN, orange: ORANGE, o: YELLOW } = PALETTE
|
||||
|
||||
function esc (s) { return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>') }
|
||||
|
||||
async function chart4_regionCompare ({
|
||||
left, right, regionLabel, unit = 'руб./кг',
|
||||
leftColor = GREEN, rightColor = ORANGE, width = 920
|
||||
}) {
|
||||
const W = width, H = 360
|
||||
const PT = 56, PB = 60
|
||||
const cH = H - PT - PB
|
||||
const gap = 48 // зазор между панелями
|
||||
const PL = 46, PR = 16
|
||||
const panelW = (W - PL - PR - gap) / 2
|
||||
async function chart4_regionCompare ({ left, right, regionLabel, unit = 'руб./кг', width = 920 }) {
|
||||
const W = width
|
||||
const gap = 48
|
||||
const panelW = (W - gap) / 2
|
||||
const PL = 28, PR = 12, PT = 50, PB = 64
|
||||
const cH = 260
|
||||
|
||||
// общая шкала по обеим панелям
|
||||
const allVals = [...left.bars, ...right.bars].map(b => b.value)
|
||||
const maxV = Math.ceil(Math.max(...allVals, 0) / 5) * 5 + 5
|
||||
const minV = Math.min(0, Math.floor(Math.min(...allVals) / 5) * 5)
|
||||
// Общая шкала Y для честного сравнения
|
||||
const allVals = [...left.bars.map(b => b.value), ...right.bars.map(b => b.value)]
|
||||
const maxV = Math.max(...allVals) * 1.12
|
||||
const minV = 0
|
||||
const H = PT + cH + PB
|
||||
const yV = v => PT + cH - (v - minV) / (maxV - minV) * cH
|
||||
const zeroY = yV(0)
|
||||
|
||||
let svg = ''
|
||||
function renderPanel (bars, offsetX, title, defaultColor, isLeftPanel) {
|
||||
const n = bars.length
|
||||
const cW = panelW - PL - PR
|
||||
const slotW = cW / n
|
||||
const barW = Math.min(50, slotW * 0.68)
|
||||
let s = ''
|
||||
|
||||
// Y-грид по всей ширине
|
||||
const step = (maxV - minV) > 40 ? 10 : 5
|
||||
for (let v = Math.ceil(minV / step) * step; v <= maxV; v += step) {
|
||||
const y = yV(v)
|
||||
svg += `<line x1="${PL}" y1="${y.toFixed(1)}" x2="${W-PR}" y2="${y.toFixed(1)}" stroke="${GRID}" stroke-width="1"/>`
|
||||
svg += `<text x="${PL-8}" y="${(y+4).toFixed(1)}" text-anchor="end" font-size="10" fill="${MDGRAY}">${v}</text>`
|
||||
}
|
||||
svg += `<text x="13" y="${PT+cH/2}" text-anchor="middle" font-size="10" fill="${MDGRAY}" transform="rotate(-90,13,${PT+cH/2})">${esc(unit)}</text>`
|
||||
// Заголовок
|
||||
s += `<text x="${offsetX + PL + cW / 2}" y="${PT - 28}" text-anchor="middle" font-size="13" font-weight="bold" fill="${DARK}">${esc(title)}</text>`
|
||||
|
||||
const drawPanel = (panel, x0, baseColor) => {
|
||||
// заголовок панели
|
||||
svg += `<text x="${(x0 + panelW/2).toFixed(1)}" y="${(PT-26).toFixed(1)}" text-anchor="middle" font-size="13" font-weight="bold" fill="${DARK}">${esc(panel.title)}</text>`
|
||||
// Y grid + labels (только у левой панели)
|
||||
if (isLeftPanel) {
|
||||
const step = maxV > 50 ? 10 : 5
|
||||
for (let v = 0; v <= maxV; v += step) {
|
||||
const y = yV(v)
|
||||
s += `<line x1="${offsetX + PL}" y1="${y.toFixed(1)}" x2="${offsetX + PL + cW}" y2="${y.toFixed(1)}" stroke="${GRID}" stroke-width="1"/>`
|
||||
s += `<text x="${offsetX + PL - 5}" y="${(y + 4).toFixed(1)}" text-anchor="end" font-size="10" fill="${MDGRAY}">${v}</text>`
|
||||
}
|
||||
} else {
|
||||
const step = maxV > 50 ? 10 : 5
|
||||
for (let v = 0; v <= maxV; v += step) {
|
||||
const y = yV(v)
|
||||
s += `<line x1="${offsetX + PL}" y1="${y.toFixed(1)}" x2="${offsetX + PL + cW}" y2="${y.toFixed(1)}" stroke="${GRID}" stroke-width="1"/>`
|
||||
}
|
||||
}
|
||||
|
||||
const n = panel.bars.length
|
||||
const slot = panelW / n
|
||||
const bW = Math.min(46, slot * 0.62)
|
||||
// Ось X внизу
|
||||
s += `<line x1="${offsetX + PL}" y1="${yV(0).toFixed(1)}" x2="${offsetX + PL + cW}" y2="${yV(0).toFixed(1)}" stroke="${LTGRAY}" stroke-width="1.5"/>`
|
||||
|
||||
panel.bars.forEach((b, i) => {
|
||||
const cx = x0 + i*slot + slot/2
|
||||
const hl = b.isHighlight
|
||||
const color = hl ? O : baseColor
|
||||
const bH = Math.abs(yV(b.value) - zeroY)
|
||||
const by = b.value >= 0 ? yV(b.value) : zeroY
|
||||
bars.forEach((b, i) => {
|
||||
const cx = offsetX + PL + i * slotW + slotW / 2
|
||||
const x = cx - barW / 2
|
||||
const bH = Math.abs(yV(b.value) - yV(0))
|
||||
const by = yV(b.value)
|
||||
|
||||
svg += `<rect x="${(cx-bW/2).toFixed(1)}" y="${by.toFixed(1)}" width="${bW.toFixed(1)}" height="${bH.toFixed(1)}" fill="${color}" rx="2" opacity="${hl ? 1 : 0.88}"/>`
|
||||
// значение над баром
|
||||
svg += `<text x="${cx.toFixed(1)}" y="${(by-6).toFixed(1)}" text-anchor="middle" font-size="10" font-weight="bold" fill="${color}">${b.value.toFixed(1)}</text>`
|
||||
// подпись региона (с переносом-наклоном для длинных)
|
||||
svg += `<text x="${cx.toFixed(1)}" y="${(PT+cH+16).toFixed(1)}" text-anchor="end" font-size="10" fill="${hl ? O : DARK}" font-weight="${hl ? 'bold' : 'normal'}" transform="rotate(-35,${cx.toFixed(1)},${(PT+cH+16).toFixed(1)})">${esc(b.label)}</text>`
|
||||
// Цвет: highlight → жёлтый, иначе — defaultColor
|
||||
const color = b.isHighlight ? YELLOW : defaultColor
|
||||
|
||||
s += `<rect x="${x.toFixed(1)}" y="${by.toFixed(1)}" width="${barW.toFixed(1)}" height="${bH.toFixed(1)}" fill="${color}" rx="2"/>`
|
||||
|
||||
// Значение над баром
|
||||
s += `<text x="${cx.toFixed(1)}" y="${(by - 6).toFixed(1)}" text-anchor="middle" font-size="11" font-weight="bold" fill="${color}">${b.value.toFixed(1)}</text>`
|
||||
|
||||
// Подпись под осью (повёрнутая)
|
||||
const labelX = cx, labelY = yV(0) + 12
|
||||
const maxLen = Math.floor(slotW / 4.8)
|
||||
const name = b.label.length > maxLen ? b.label.slice(0, maxLen) + '…' : b.label
|
||||
s += `<text x="${labelX.toFixed(1)}" y="${labelY}" text-anchor="end" font-size="10" fill="${DARK}" transform="rotate(-40,${labelX.toFixed(1)},${labelY})">${esc(name)}</text>`
|
||||
})
|
||||
|
||||
// нулевая ось панели
|
||||
svg += `<line x1="${x0.toFixed(1)}" y1="${zeroY.toFixed(1)}" x2="${(x0+panelW).toFixed(1)}" y2="${zeroY.toFixed(1)}" stroke="${LTGRAY}" stroke-width="1"/>`
|
||||
// Подпись единиц
|
||||
s += `<text x="${offsetX + PL + cW / 2}" y="${PT + cH + PB - 4}" text-anchor="middle" font-size="10" fill="${MDGRAY}">${esc(unit)}</text>`
|
||||
|
||||
return s
|
||||
}
|
||||
|
||||
const leftX = PL
|
||||
const rightX = PL + panelW + gap
|
||||
const leftSvg = renderPanel(left.bars, 0, left.title, GREEN, true)
|
||||
const rightSvg = renderPanel(right.bars, panelW + gap, right.title, ORANGE, false)
|
||||
|
||||
drawPanel(left, leftX, leftColor)
|
||||
drawPanel(right, rightX, rightColor)
|
||||
// Разделительная линия между панелями
|
||||
const divX = panelW + gap / 2
|
||||
const dividerLine = `<line x1="${divX}" y1="${PT - 20}" x2="${divX}" y2="${PT + cH}" stroke="${LTGRAY}" stroke-width="1" stroke-dasharray="4,4"/>`
|
||||
|
||||
// разделитель между панелями
|
||||
const sepX = leftX + panelW + gap/2
|
||||
svg += `<line x1="${sepX.toFixed(1)}" y1="${(PT-10).toFixed(1)}" x2="${sepX.toFixed(1)}" y2="${(PT+cH).toFixed(1)}" stroke="${GRID}" stroke-width="1" stroke-dasharray="3,3"/>`
|
||||
|
||||
const fullSvg = `<svg width="${W}" height="${H+40}" xmlns="http://www.w3.org/2000/svg" font-family="-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif">
|
||||
<rect x="0" y="0" width="3" height="40" fill="${RED}"/>
|
||||
<text x="14" y="18" font-size="12" font-weight="bold" fill="${RED}">DairyTrends · dairy-news.ru/dairytrends</text>
|
||||
const fullSvg = `<svg width="${W}" height="${H + 40}" xmlns="http://www.w3.org/2000/svg" font-family="-apple-system, 'Helvetica Neue', Arial, sans-serif">
|
||||
<rect x="0" y="0" width="3" height="40" fill="#C0272D"/>
|
||||
<text x="14" y="18" font-size="12" font-weight="bold" fill="#C0272D">DairyTrends · dairy-news.ru/dairytrends</text>
|
||||
<text x="14" y="34" font-size="11" fill="${MDGRAY}">${esc(regionLabel)}</text>
|
||||
<g transform="translate(0,40)">${svg}</g>
|
||||
<g transform="translate(0,40)">${leftSvg}${dividerLine}${rightSvg}</g>
|
||||
</svg>`
|
||||
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user