diff --git a/lib/js/src/compose/types/chart/chart.ts b/lib/js/src/compose/types/chart/chart.ts
index 09f65f175..b42ade3b2 100644
--- a/lib/js/src/compose/types/chart/chart.ts
+++ b/lib/js/src/compose/types/chart/chart.ts
@@ -2,7 +2,6 @@ import { BaseChart } from './base'
import {
Dimension,
Metric,
- dimensionFunctions,
TemporalDataPoint,
} from './util'
import { getColorschemeColors } from '../../../shared'
@@ -63,7 +62,7 @@ export default class Chart extends BaseChart {
} = reports[0] || {}
const hasAxis = datasets.some(({ type }: any) => ['bar', 'line'].includes(type))
- const timeDimension = (dimensionFunctions.lookup(dimension) || {}).time
+ let horizontal = false
if (hasAxis) {
if (yAxis) {
@@ -75,13 +74,13 @@ export default class Chart extends BaseChart {
beginAtZero,
min,
max,
- horizontal,
} = yAxis
+ horizontal = !!yAxis.horizontal
+
const xAxis = {
nameLocation: 'center',
- type: 'category',
- data: labels,
+ type: dimension.modifier === 'auto' ? 'time' : 'category',
axisLabel: {
interval: 0,
overflow: 'break',
@@ -132,7 +131,7 @@ export default class Chart extends BaseChart {
const { fixed, relative } = tooltip
const tooltipFormatter = t?.formatting ? t.formatting : `{a}
{b} : {c}${relative ? ' ({d}%)' : ''}`
- const labelFormatter = `{c}${relative ? ' ({d}%)' : ''}`
+ const labelFormatter = `{@[1]}${relative ? ' ({d}%)' : ''}`
// We should render the first metric in the dataset as the last
const z = (datasets.length - 1) - index
@@ -221,6 +220,16 @@ export default class Chart extends BaseChart {
containLabel: true,
}
+ if (horizontal) {
+ data = labels.map((name: string, i: number) => {
+ return [data[i], name]
+ })
+ } else {
+ data = labels.map((name: string, i: number) => {
+ return [name, data[i]]
+ })
+ }
+
return {
z,
stack,
diff --git a/lib/js/src/compose/types/chart/util.ts b/lib/js/src/compose/types/chart/util.ts
index b19c09857..03b471837 100644
--- a/lib/js/src/compose/types/chart/util.ts
+++ b/lib/js/src/compose/types/chart/util.ts
@@ -140,7 +140,6 @@ interface DimensionFunction {
text: string;
value: string;
convert: (f: string) => string;
- time: boolean | object;
}
export class DimensionFunctions extends Array {
@@ -167,42 +166,42 @@ dimensionFunctions.push(...[
text: 'none',
value: '(no grouping / buckets)',
convert: (f: string) => f,
- time: false,
+ },
+
+ {
+ text: 'auto',
+ value: 'auto',
+ convert: (f: string) => f,
},
{
text: 'date',
value: 'DATE',
convert: (f: string) => `DATE(${f})`,
- time: { unit: 'day', minUnit: 'day', round: true },
},
{
text: 'week',
value: 'WEEK',
convert: (f: string) => `WEEK(${f})`,
- time: { unit: 'week', minUnit: 'week', round: true, isoWeekday: true },
},
{
text: 'month',
value: 'MONTH',
convert: (f: string) => `DATE_FORMAT(${f}, '%Y-%m-01')`,
- time: { unit: 'month', minUnit: 'month', round: true },
},
{
text: 'quarter',
value: 'QUARTER',
convert: (f: string) => `QUARTER(${f})`,
- time: { unit: 'quarter', minUnit: 'quarter', round: true },
},
{
text: 'year',
value: 'YEAR',
convert: (f: string) => `DATE_FORMAT(${f}, '%Y-01-01')`,
- time: { unit: 'year', minUnit: 'year', round: true },
},
])
diff --git a/locale/en/corteza-webapp-compose/chart.yaml b/locale/en/corteza-webapp-compose/chart.yaml
index 48faf2037..bdf16a1a4 100644
--- a/locale/en/corteza-webapp-compose/chart.yaml
+++ b/locale/en/corteza-webapp-compose/chart.yaml
@@ -23,14 +23,15 @@ edit:
fieldLabel: Field *
fieldPlaceholder: Select a dimension field
function:
- date: DATE
- label: Function
- month: MONTH
- none: (no grouping / buckets)
placeholder: Select dimension modifier (bucket size)
- quarter: QUARTER
- week: WEEK
- year: YEAR
+ none: No grouping
+ auto: Auto
+ date: Date
+ label: Function
+ month: Month
+ quarter: Quarter
+ week: Week
+ year: Year
gaugeSteps: Steps
label: Dimensions
skipMissingValues: Skip missing values