Skip to content

adds the possibility to define border styles for each data point from the series. works for bar, line, area, scatter, pie #1343

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

adds the possibility to define border styles for each data point from the series. works for bar, line, area, scatter, pie #1343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/core-interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1173,6 +1173,14 @@ export interface OptsChartData {
* @example [2000, 2010, 2020]
*/
values?: number[]
/**
* custom styles, e.g border
* @example [
{border: {pt:'1', color:'ff0000'} },
{border: {pt:'2', color:'000000'} }
]
*/
styles?: object[]
/**
* Override `chartColors`
*/
Expand Down
121 changes: 112 additions & 9 deletions src/gen-charts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -831,6 +831,7 @@ function makeChartType (chartType: CHART_NAME, data: IOptsChartData[], opts: ICh
}
]
*/

data.forEach(obj => {
colorIndex++
strXml += '<c:ser>'
Expand Down Expand Up @@ -900,7 +901,13 @@ function makeChartType (chartType: CHART_NAME, data: IOptsChartData[], opts: ICh
if (opts.lineDataSymbolSize) strXml += `<c:size val="${opts.lineDataSymbolSize}"/>` // Defaults to "auto" otherwise (but this is usually too small, so there is a default)
strXml += ' <c:spPr>'
strXml += ` <a:solidFill>${createColorElement(opts.chartColors[obj._dataIndex + 1 > opts.chartColors.length ? Math.floor(Math.random() * opts.chartColors.length) : obj._dataIndex])}</a:solidFill>`
strXml += ` <a:ln w="${opts.lineDataSymbolLineSize}" cap="flat"><a:solidFill>${createColorElement(opts.lineDataSymbolLineColor || seriesColor)}</a:solidFill><a:prstDash val="solid"/><a:round/></a:ln>`
strXml += ` <a:ln w="${opts.lineDataSymbolLineSize}" cap="flat">`
strXml += ' <a:solidFill>'
strXml += ` ${createColorElement(opts.lineDataSymbolLineColor || seriesColor)}`
strXml += ' </a:solidFill>'
strXml += ' <a:prstDash val="solid"/>'
strXml += ' <a:round/>'
strXml += ' </a:ln>'
strXml += ' <a:effectLst/>'
strXml += ' </c:spPr>'
strXml += '</c:marker>'
Expand Down Expand Up @@ -988,7 +995,66 @@ function makeChartType (chartType: CHART_NAME, data: IOptsChartData[], opts: ICh
// Option: `smooth`
if (chartType === CHART_TYPE.LINE) strXml += '<c:smooth val="' + (opts.lineSmooth ? '1' : '0') + '"/>'

// 4: Close "SERIES"
/* EX:
data: [
{
name: 'Project Status',
labels: ['Red', 'On Hold', 'Green', 'Unknown'],
values: [10, 20, 38, 2]
styles: [
{border: {pt: 2, color: '#ff0000'}}
{}
{border: {pt: 2, color: '#00ff00'}}
{}
]
}
]
*/
// 4: data point "Styles"
if (obj.styles) {
obj.styles.forEach((style: any, idx) => {
if (style !== undefined && style !== null) {
const borderStyle = 'border' in style ? style.border : {}
if (chartType === CHART_TYPE.BAR) {
strXml += '<c:dPt>'
strXml += ` <c:idx idx="${idx}"/>`
strXml += ' <c:spPr>'
strXml += ' <a:solidFill>'
strXml += ` ${createColorElement(seriesColor)}`
strXml += ' </a:solidFill>'
strXml += ` <a:ln w="${valToPts(borderStyle && 'pt' in borderStyle ? borderStyle.pt : 1)}" cap="flat">`
strXml += ' <a:solidFill>'
strXml += ` ${createColorElement(borderStyle && 'color' in borderStyle ? borderStyle.color : seriesColor)}`
strXml += ' </a:solidFill>'
strXml += ' </a:ln>'
strXml += ' </c:spPr>'
strXml += '</c:dPt>'
} else if (chartType === CHART_TYPE.LINE || chartType === CHART_TYPE.AREA) {
strXml += '<c:dPt>'
strXml += ` <c:idx idx="${idx}"/>`
strXml += ' <c:marker>'
strXml += ' <c:spPr>'
strXml += ' <a:solidFill>'
strXml += ` ${createColorElement(seriesColor)}`
strXml += ' </a:solidFill>'
strXml += ` <a:ln w="${valToPts(borderStyle && 'pt' in borderStyle ? borderStyle.pt : 1)}" cap="flat">`
strXml += ' <a:solidFill>'
strXml += ` ${createColorElement(borderStyle && 'color' in borderStyle ? borderStyle.color : seriesColor)}`
strXml += ' </a:solidFill>'
strXml += ' <a:prstDash val="solid"/>'
strXml += ' <a:round/>'
strXml += ' </a:ln>'
strXml += ' <a:effectLst/>'
strXml += ' </c:spPr>'
strXml += ' </c:marker>'
strXml += ' <c:bubble3D val="0"/>'
strXml += '</c:dPt>'
}
}
})
}

// 5: Close "SERIES"
strXml += '</c:ser>'
})

Expand Down Expand Up @@ -1288,6 +1354,35 @@ function makeChartType (chartType: CHART_NAME, data: IOptsChartData[], opts: ICh
// Option: `smooth`
strXml += '<c:smooth val="' + (opts.lineSmooth ? '1' : '0') + '"/>'

if (obj.styles) {
obj.styles.forEach((style: any, idx) => {
if (style !== undefined && style !== null) {
const color = opts.chartColors[colorIndex % opts.chartColors.length]
const borderStyle = 'border' in style ? style.border : {}

strXml += '<c:dPt>'
strXml += ` <c:idx idx="${idx}"/>`
strXml += ' <c:marker>'
strXml += ' <c:spPr>'
strXml += ' <a:solidFill>'
strXml += ` ${createColorElement(color)}`
strXml += ' </a:solidFill>'
strXml += ` <a:ln w="${valToPts('pt' in borderStyle ? borderStyle.pt : 2)}" cap="flat">`
strXml += ' <a:solidFill>'
strXml += ` ${createColorElement('color' in borderStyle ? borderStyle.color : color)}`
strXml += ' </a:solidFill>'
strXml += ' <a:prstDash val="solid"/>'
strXml += ' <a:round/>'
strXml += ' </a:ln>'
strXml += ' <a:effectLst/>'
strXml += ' </c:spPr>'
strXml += ' </c:marker>'
strXml += ' <c:bubble3D val="0"/>'
strXml += '</c:dPt>'
}
})
}

// 4: Close "SERIES"
strXml += '</c:ser>'
})
Expand Down Expand Up @@ -1481,7 +1576,6 @@ function makeChartType (chartType: CHART_NAME, data: IOptsChartData[], opts: ICh
case CHART_TYPE.PIE:
// Use the same let name so code blocks from barChart are interchangeable
optsChartData = data[0]

/* EX:
data: [
{
Expand Down Expand Up @@ -1520,16 +1614,25 @@ function makeChartType (chartType: CHART_NAME, data: IOptsChartData[], opts: ICh

// 2: "Data Point" block for every data row
optsChartData.labels[0].forEach((_label, idx) => {
const color = opts.chartColors[idx + 1 > opts.chartColors.length ? Math.floor(Math.random() * opts.chartColors.length) : idx]

const style = optsChartData?.styles?.[idx] ?? {}

const borderStyle = 'border' in style
? style.border as {pt, color}
: opts.dataBorder ? opts.dataBorder : {}

const explosion = 'pt' in borderStyle ? borderStyle.pt : 0

strXml += '<c:dPt>'
strXml += ` <c:idx val="${idx}"/>`
strXml += ` <c:explosion val="${explosion}"/>`
strXml += ' <c:bubble3D val="0"/>'
strXml += ' <c:spPr>'
strXml += `<a:solidFill>${createColorElement(
opts.chartColors[idx + 1 > opts.chartColors.length ? Math.floor(Math.random() * opts.chartColors.length) : idx]
)}</a:solidFill>`
if (opts.dataBorder) {
strXml += `<a:ln w="${valToPts(opts.dataBorder.pt)}" cap="flat"><a:solidFill>${createColorElement(
opts.dataBorder.color
strXml += `<a:solidFill>${createColorElement(color)}</a:solidFill>`
if (borderStyle) {
strXml += `<a:ln w="${valToPts(borderStyle.pt)}" cap="flat"><a:solidFill>${createColorElement(
borderStyle.color
)}</a:solidFill><a:prstDash val="solid"/><a:round/></a:ln>`
}
strXml += createShadowElement(opts.shadow, DEF_SHAPE_SHADOW)
Expand Down