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