refactor of bar done i think
This commit is contained in:
Gerard Burns
parent
1a1a417d94
commit
8d77bb016f
4 changed files with 166 additions and 197 deletions
|
|
@ -159,7 +159,7 @@
|
|||
box-sizing: border-box;
|
||||
border: 1px solid var(--grey-4);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
|
||||
transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1684,19 +1684,19 @@
|
|||
"type": "select",
|
||||
"label": "Colors",
|
||||
"key": "palette",
|
||||
"defaultValue": "Palette 1",
|
||||
"defaultValue": "palette1",
|
||||
"options": [
|
||||
"Custom",
|
||||
"Palette 1",
|
||||
"Palette 2",
|
||||
"Palette 3",
|
||||
"Palette 4",
|
||||
"Palette 5",
|
||||
"Palette 6",
|
||||
"Palette 7",
|
||||
"Palette 8",
|
||||
"Palette 9",
|
||||
"Palette 10"
|
||||
{ "label": "Custom", "value": "Custom" },
|
||||
{ "label": "Palette 1", "value": "palette1" },
|
||||
{ "label": "Palette 2", "value": "palette2" },
|
||||
{ "label": "Palette 3", "value": "palette3" },
|
||||
{ "label": "Palette 4", "value": "palette4" },
|
||||
{ "label": "Palette 5", "value": "palette5" },
|
||||
{ "label": "Palette 6", "value": "palette6" },
|
||||
{ "label": "Palette 7", "value": "palette7" },
|
||||
{ "label": "Palette 8", "value": "palette8" },
|
||||
{ "label": "Palette 9", "value": "palette9" },
|
||||
{ "label": "Palette 10", "value": "palette10" }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -1844,17 +1844,17 @@
|
|||
"key": "palette",
|
||||
"defaultValue": "Palette 1",
|
||||
"options": [
|
||||
"Custom",
|
||||
"Palette 1",
|
||||
"Palette 2",
|
||||
"Palette 3",
|
||||
"Palette 4",
|
||||
"Palette 5",
|
||||
"Palette 6",
|
||||
"Palette 7",
|
||||
"Palette 8",
|
||||
"Palette 9",
|
||||
"Palette 10"
|
||||
{ "label": "Custom", "value": "Custom" },
|
||||
{ "label": "Palette 1", "value": "palette1" },
|
||||
{ "label": "Palette 2", "value": "palette2" },
|
||||
{ "label": "Palette 3", "value": "palette3" },
|
||||
{ "label": "Palette 4", "value": "palette4" },
|
||||
{ "label": "Palette 5", "value": "palette5" },
|
||||
{ "label": "Palette 6", "value": "palette6" },
|
||||
{ "label": "Palette 7", "value": "palette7" },
|
||||
{ "label": "Palette 8", "value": "palette8" },
|
||||
{ "label": "Palette 9", "value": "palette9" },
|
||||
{ "label": "Palette 10", "value": "palette10" }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -1995,19 +1995,19 @@
|
|||
"type": "select",
|
||||
"label": "Colors",
|
||||
"key": "palette",
|
||||
"defaultValue": "Palette 1",
|
||||
"defaultValue": "palette1",
|
||||
"options": [
|
||||
"Custom",
|
||||
"Palette 1",
|
||||
"Palette 2",
|
||||
"Palette 3",
|
||||
"Palette 4",
|
||||
"Palette 5",
|
||||
"Palette 6",
|
||||
"Palette 7",
|
||||
"Palette 8",
|
||||
"Palette 9",
|
||||
"Palette 10"
|
||||
{ "label": "Custom", "value": "Custom" },
|
||||
{ "label": "Palette 1", "value": "palette1" },
|
||||
{ "label": "Palette 2", "value": "palette2" },
|
||||
{ "label": "Palette 3", "value": "palette3" },
|
||||
{ "label": "Palette 4", "value": "palette4" },
|
||||
{ "label": "Palette 5", "value": "palette5" },
|
||||
{ "label": "Palette 6", "value": "palette6" },
|
||||
{ "label": "Palette 7", "value": "palette7" },
|
||||
{ "label": "Palette 8", "value": "palette8" },
|
||||
{ "label": "Palette 9", "value": "palette9" },
|
||||
{ "label": "Palette 10", "value": "palette10" }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -2143,19 +2143,19 @@
|
|||
"type": "select",
|
||||
"label": "Colors",
|
||||
"key": "palette",
|
||||
"defaultValue": "Palette 1",
|
||||
"defaultValue": "palette1",
|
||||
"options": [
|
||||
"Custom",
|
||||
"Palette 1",
|
||||
"Palette 2",
|
||||
"Palette 3",
|
||||
"Palette 4",
|
||||
"Palette 5",
|
||||
"Palette 6",
|
||||
"Palette 7",
|
||||
"Palette 8",
|
||||
"Palette 9",
|
||||
"Palette 10"
|
||||
{ "label": "Custom", "value": "Custom" },
|
||||
{ "label": "Palette 1", "value": "palette1" },
|
||||
{ "label": "Palette 2", "value": "palette2" },
|
||||
{ "label": "Palette 3", "value": "palette3" },
|
||||
{ "label": "Palette 4", "value": "palette4" },
|
||||
{ "label": "Palette 5", "value": "palette5" },
|
||||
{ "label": "Palette 6", "value": "palette6" },
|
||||
{ "label": "Palette 7", "value": "palette7" },
|
||||
{ "label": "Palette 8", "value": "palette8" },
|
||||
{ "label": "Palette 9", "value": "palette9" },
|
||||
{ "label": "Palette 10", "value": "palette10" }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -2272,19 +2272,19 @@
|
|||
"type": "select",
|
||||
"label": "Colors",
|
||||
"key": "palette",
|
||||
"defaultValue": "Palette 1",
|
||||
"defaultValue": "palette1",
|
||||
"options": [
|
||||
"Custom",
|
||||
"Palette 1",
|
||||
"Palette 2",
|
||||
"Palette 3",
|
||||
"Palette 4",
|
||||
"Palette 5",
|
||||
"Palette 6",
|
||||
"Palette 7",
|
||||
"Palette 8",
|
||||
"Palette 9",
|
||||
"Palette 10"
|
||||
{ "label": "Custom", "value": "Custom" },
|
||||
{ "label": "Palette 1", "value": "palette1" },
|
||||
{ "label": "Palette 2", "value": "palette2" },
|
||||
{ "label": "Palette 3", "value": "palette3" },
|
||||
{ "label": "Palette 4", "value": "palette4" },
|
||||
{ "label": "Palette 5", "value": "palette5" },
|
||||
{ "label": "Palette 6", "value": "palette6" },
|
||||
{ "label": "Palette 7", "value": "palette7" },
|
||||
{ "label": "Palette 8", "value": "palette8" },
|
||||
{ "label": "Palette 9", "value": "palette9" },
|
||||
{ "label": "Palette 10", "value": "palette10" }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -2510,19 +2510,19 @@
|
|||
"type": "select",
|
||||
"label": "Colors",
|
||||
"key": "palette",
|
||||
"defaultValue": "Palette 1",
|
||||
"defaultValue": "palette1",
|
||||
"options": [
|
||||
"Custom",
|
||||
"Palette 1",
|
||||
"Palette 2",
|
||||
"Palette 3",
|
||||
"Palette 4",
|
||||
"Palette 5",
|
||||
"Palette 6",
|
||||
"Palette 7",
|
||||
"Palette 8",
|
||||
"Palette 9",
|
||||
"Palette 10"
|
||||
{ "label": "Custom", "value": "Custom" },
|
||||
{ "label": "Palette 1", "value": "palette1" },
|
||||
{ "label": "Palette 2", "value": "palette2" },
|
||||
{ "label": "Palette 3", "value": "palette3" },
|
||||
{ "label": "Palette 4", "value": "palette4" },
|
||||
{ "label": "Palette 5", "value": "palette5" },
|
||||
{ "label": "Palette 6", "value": "palette6" },
|
||||
{ "label": "Palette 7", "value": "palette7" },
|
||||
{ "label": "Palette 8", "value": "palette8" },
|
||||
{ "label": "Palette 9", "value": "palette9" },
|
||||
{ "label": "Palette 10", "value": "palette10" }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -5187,19 +5187,19 @@
|
|||
"type": "select",
|
||||
"label": "Colors",
|
||||
"key": "palette",
|
||||
"defaultValue": "Palette 1",
|
||||
"defaultValue": "palette1",
|
||||
"options": [
|
||||
"Custom",
|
||||
"Palette 1",
|
||||
"Palette 2",
|
||||
"Palette 3",
|
||||
"Palette 4",
|
||||
"Palette 5",
|
||||
"Palette 6",
|
||||
"Palette 7",
|
||||
"Palette 8",
|
||||
"Palette 9",
|
||||
"Palette 10"
|
||||
{ "label": "Custom", "value": "Custom" },
|
||||
{ "label": "Palette 1", "value": "palette1" },
|
||||
{ "label": "Palette 2", "value": "palette2" },
|
||||
{ "label": "Palette 3", "value": "palette3" },
|
||||
{ "label": "Palette 4", "value": "palette4" },
|
||||
{ "label": "Palette 5", "value": "palette5" },
|
||||
{ "label": "Palette 6", "value": "palette6" },
|
||||
{ "label": "Palette 7", "value": "palette7" },
|
||||
{ "label": "Palette 8", "value": "palette8" },
|
||||
{ "label": "Palette 9", "value": "palette9" },
|
||||
{ "label": "Palette 10", "value": "palette10" }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -8,9 +8,6 @@
|
|||
const component = getContext("component")
|
||||
|
||||
export let options
|
||||
$: {
|
||||
console.log(options);
|
||||
}
|
||||
/*
|
||||
export let invalid = false
|
||||
|
||||
|
|
|
|||
|
|
@ -3,10 +3,11 @@
|
|||
import ApexChart from "./ApexChart.svelte"
|
||||
import { get } from "lodash";
|
||||
|
||||
export let title
|
||||
export let dataProvider
|
||||
export let labelColumn
|
||||
export let valueColumns
|
||||
|
||||
export let title
|
||||
export let xAxisLabel
|
||||
export let yAxisLabel
|
||||
export let height
|
||||
|
|
@ -20,126 +21,97 @@
|
|||
export let c1, c2, c3, c4, c5
|
||||
export let horizontal
|
||||
|
||||
$: options = setUpChart(
|
||||
title,
|
||||
dataProvider,
|
||||
labelColumn,
|
||||
valueColumns,
|
||||
xAxisLabel,
|
||||
yAxisLabel,
|
||||
height,
|
||||
width,
|
||||
dataLabels,
|
||||
animate,
|
||||
legend,
|
||||
stacked,
|
||||
yAxisUnits,
|
||||
palette,
|
||||
horizontal,
|
||||
c1 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : null,
|
||||
customColor
|
||||
)
|
||||
const formatters = {
|
||||
["Default"]: val => val,
|
||||
["Thousands"]: val => `${Math.round(val / 1000)}K`,
|
||||
["Millions"]: val => `${Math.round(val / 1000000)}M`,
|
||||
}
|
||||
|
||||
$: customColor = palette === "Custom"
|
||||
$: series = getSeries(dataProvider, valueColumns)
|
||||
$: categories = getCategories(dataProvider, labelColumn);
|
||||
|
||||
const setUpChart = (
|
||||
title,
|
||||
dataProvider,
|
||||
labelColumn,
|
||||
valueColumns,
|
||||
xAxisLabel,
|
||||
yAxisLabel,
|
||||
height,
|
||||
width,
|
||||
dataLabels,
|
||||
animate,
|
||||
legend,
|
||||
stacked,
|
||||
yAxisUnits,
|
||||
palette,
|
||||
horizontal,
|
||||
colors,
|
||||
customColor
|
||||
) => {
|
||||
const allCols = [labelColumn, ...(valueColumns || [null])]
|
||||
if (
|
||||
!dataProvider ||
|
||||
!dataProvider.rows?.length ||
|
||||
allCols.find(x => x == null)
|
||||
) {
|
||||
return null
|
||||
}
|
||||
$: dataType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ?
|
||||
"datetime" : "category"
|
||||
|
||||
// Fetch data
|
||||
const { schema, rows } = dataProvider
|
||||
|
||||
const data = rows.slice(0, 100)
|
||||
if (!schema || !data.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
// Initialise default chart
|
||||
let builder = new ApexOptionsBuilder()
|
||||
.type("bar")
|
||||
.title(title)
|
||||
.width(width)
|
||||
.height(height)
|
||||
.xLabel(xAxisLabel)
|
||||
.yLabel(yAxisLabel)
|
||||
.dataLabels(dataLabels)
|
||||
.animate(animate)
|
||||
.legend(legend)
|
||||
.stacked(stacked)
|
||||
.palette(palette)
|
||||
.horizontal(horizontal)
|
||||
.colors(customColor ? colors : null)
|
||||
|
||||
// Add data
|
||||
if (schema[labelColumn]) {
|
||||
const labelFieldType = schema[labelColumn].type
|
||||
if (horizontal) {
|
||||
builder = builder.xUnits(yAxisUnits)
|
||||
} else {
|
||||
builder = builder.yUnits(yAxisUnits)
|
||||
$: options = {
|
||||
series,
|
||||
colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
|
||||
theme: {
|
||||
palette: palette === "Custom" ? null : palette
|
||||
},
|
||||
legend: {
|
||||
show: legend,
|
||||
position: "top",
|
||||
horizontalAlign: "right",
|
||||
showForSingleSeries: true,
|
||||
showForNullSeries: true,
|
||||
showForZeroSeries: true,
|
||||
},
|
||||
title: {
|
||||
text: title,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: dataLabels
|
||||
},
|
||||
chart: {
|
||||
height: height == null || height === "" ? "auto" : height,
|
||||
width: width == null || width === "" ? "100%" : width,
|
||||
type: "bar",
|
||||
stacked,
|
||||
animations: {
|
||||
enabled: animate
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: dataType,
|
||||
categories,
|
||||
title: {
|
||||
text: xAxisLabel
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: yAxisLabel
|
||||
},
|
||||
labels: {
|
||||
formatter: formatters[yAxisUnits]
|
||||
}
|
||||
}
|
||||
const series = (valueColumns ?? []).map(column => ({
|
||||
}
|
||||
|
||||
const getSeries = (datasource, valueColumns = []) => {
|
||||
const rows = datasource.rows ?? [];
|
||||
|
||||
return valueColumns.map(column => ({
|
||||
name: column,
|
||||
data: data.map(row => {
|
||||
const value = get(row, column);
|
||||
|
||||
if (schema?.[column]?.type === 'datetime') {
|
||||
return Date.parse(value)
|
||||
}
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (Number.isNaN(parseInt(value, 10))) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return value;
|
||||
data: rows.map(row => {
|
||||
return row?.[column]
|
||||
}),
|
||||
}))
|
||||
builder = builder.series(series)
|
||||
builder = builder.xCategories(data.map(row => {
|
||||
const value = row[labelColumn]
|
||||
if (schema[labelColumn]?.type === 'datetime') {
|
||||
const dateString = (new Date(Date.parse(value))).toLocaleDateString()
|
||||
console.log(value)
|
||||
console.log(dateString)
|
||||
console.log()
|
||||
return dateString
|
||||
}
|
||||
|
||||
const getCategories = (datasource, labelColumn) => {
|
||||
const rows = datasource.rows ?? [];
|
||||
|
||||
return rows.map(row => {
|
||||
const value = row?.[labelColumn]
|
||||
|
||||
// If a nullish or non-scalar type, replace it with an empty string
|
||||
if (!["string", "number", "boolean"].includes(typeof value)) {
|
||||
return ""
|
||||
}
|
||||
|
||||
return value ?? ""
|
||||
}))
|
||||
|
||||
// Build chart options
|
||||
return builder.getOptions()
|
||||
return value;
|
||||
})
|
||||
}
|
||||
|
||||
$: console.log("opt", options);
|
||||
</script>
|
||||
|
||||
<ApexChart {options} />
|
||||
|
|
|
|||
Loading…
Reference in a new issue