+
diff --git a/client/web/compose/src/views/Admin/Charts/Edit.vue b/client/web/compose/src/views/Admin/Charts/Edit.vue
index f2c332306..cccc7c21f 100644
--- a/client/web/compose/src/views/Admin/Charts/Edit.vue
+++ b/client/web/compose/src/views/Admin/Charts/Edit.vue
@@ -169,42 +169,31 @@
-
- {{ $t('edit.loadData') }}
-
-
- {{ error }}
-
-
-
+
+ {{ $t('edit.loadData') }}
+
+
+
+
+
@@ -241,6 +230,7 @@ import Reports from 'corteza-webapp-compose/src/components/Chart/Report'
import { chartConstructor } from 'corteza-webapp-compose/src/lib/charts'
import VueSelect from 'vue-select'
import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
+import { debounce } from 'lodash'
const { colorschemes } = shared
const defaultReport = {
@@ -285,7 +275,6 @@ export default {
data () {
return {
chart: undefined,
- error: null,
processing: false,
editReportIndex: undefined,
@@ -440,6 +429,15 @@ export default {
}
},
},
+
+ 'chart.config': {
+ deep: true,
+ handler () {
+ debounce(function () {
+ this.update()
+ }, 500)
+ },
+ },
},
methods: {
diff --git a/lib/js/src/compose/types/chart/base.ts b/lib/js/src/compose/types/chart/base.ts
index 290a302ec..d49ff9f54 100644
--- a/lib/js/src/compose/types/chart/base.ts
+++ b/lib/js/src/compose/types/chart/base.ts
@@ -252,12 +252,7 @@ export class BaseChart {
}
defDimension (): Dimension {
- return Object.assign({},
- {
- conditions: {},
- meta: {},
- labels: { rotateXAxisLabel: 0 }
- })
+ return Object.assign({}, { conditions: {}, meta: {} })
}
defMetrics (): Metric {
@@ -277,6 +272,8 @@ export class BaseChart {
},
tooltip: {},
legend: {
+ isScrollable: true,
+ orientation: 'horizontal',
position: {
top: '0',
right: '0',
diff --git a/lib/js/src/compose/types/chart/chart.ts b/lib/js/src/compose/types/chart/chart.ts
index 03bf75cbb..f5d6cd1d6 100644
--- a/lib/js/src/compose/types/chart/chart.ts
+++ b/lib/js/src/compose/types/chart/chart.ts
@@ -163,11 +163,12 @@ export default class Chart extends BaseChart {
}
}
- let pieLegend = {}
-
options.series = datasets.map(({ type, label, data, fill, tooltip }: any, index: number) => {
const { fixed, relative } = tooltip
+ const tooltipFormatter = t?.formatting ? t.formatting : `{a}
{b} : {c}${relative ? ' ({d}%)' : ''}`
+ const labelFormatter = `{c}${relative ? ' ({d}%)' : ''}`
+
if (['pie', 'doughnut'].includes(type)) {
const startRadius = type === 'doughnut' ? 40 : 0
@@ -176,7 +177,10 @@ export default class Chart extends BaseChart {
let lbl = {}
if (t?.labelsNextToPartition) {
- lbl = { show: true }
+ lbl = {
+ show: true,
+ overflow: 'truncate',
+ }
} else {
lbl = {
show: fixed,
@@ -186,18 +190,6 @@ export default class Chart extends BaseChart {
}
}
- const formatter = t?.formatting
- ? t.formatting
- : `{a}
{b} : {c}${relative ? ' ({d}%)' : ''}`
-
- if (l?.isCustomized) {
- pieLegend = {
- top: l?.position?.top || 'auto',
- right: l?.position?.right || 'auto',
- bottom: l?.position?.bottom || 'auto',
- left: l?.position?.left || 'auto',
- }
- }
return {
z: index,
@@ -207,11 +199,11 @@ export default class Chart extends BaseChart {
center: ['50%', '55%'],
tooltip: {
trigger: 'item',
- formatter,
+ formatter: tooltipFormatter,
},
label: {
...lbl,
- fontSize: 14,
+ formatter: labelFormatter,
},
itemStyle: {
borderRadius: 5,
@@ -228,10 +220,10 @@ export default class Chart extends BaseChart {
data: labels.map((name: string, i: number) => {
return { name, value: data[i] }
}),
- top: offset?.isDefault ? 45 : offset?.top,
- right: offset?.isDefault ? 25 : offset?.right,
- bottom: offset?.isDefault ? 40 : offset?.bottom,
- left: offset?.isDefault ? 40 : offset?.left,
+ top: offset?.isDefault ? undefined : offset?.top,
+ right: offset?.isDefault ? undefined : offset?.right,
+ bottom: offset?.isDefault ? undefined : offset?.bottom,
+ left: offset?.isDefault ? undefined : offset?.left,
}
} else if (['bar', 'line'].includes(type)) {
options.tooltip.trigger = 'axis'
@@ -253,9 +245,8 @@ export default class Chart extends BaseChart {
options.grid = {
top: offset?.isDefault ? 45 : offset?.top,
right: offset?.isDefault ? 25 : offset?.right,
- bottom: offset?.isDefault ? 40 : offset?.bottom,
- left: offset?.isDefault ? 40 : offset?.left,
- // prevents long labels like dates from being cut off
+ bottom: offset?.isDefault ? 25 : offset?.bottom,
+ left: offset?.isDefault ? 25 : offset?.left,
containLabel: true,
}
@@ -272,7 +263,7 @@ export default class Chart extends BaseChart {
position: 'inside',
align: 'center',
verticalAlign: 'middle',
- fontSize: 14,
+ formatter: labelFormatter,
},
data,
}
@@ -286,8 +277,12 @@ export default class Chart extends BaseChart {
},
legend: {
show: !l?.isHidden,
- type: l?.isList ? 'plain' : 'scroll',
- ...pieLegend,
+ type: l?.isScrollable ? 'scroll' : 'plain',
+ top: l?.isCustomized ? l?.position?.top : undefined,
+ right: l?.isCustomized ? l?.position?.right : undefined,
+ bottom: l?.isCustomized ? l?.position?.bottom : undefined,
+ left: l?.isCustomized ? l?.position?.left : 'center',
+ orient: l?.orientation || 'horizontal'
},
...options,
}
diff --git a/lib/js/src/compose/types/chart/util.ts b/lib/js/src/compose/types/chart/util.ts
index 747e826d6..bd57432eb 100644
--- a/lib/js/src/compose/types/chart/util.ts
+++ b/lib/js/src/compose/types/chart/util.ts
@@ -76,7 +76,8 @@ export interface Position {
export interface Legend {
isHidden?: boolean;
- isList?: boolean;
+ orientation?: string;
+ isScrollable?: boolean;
isCustomized?: boolean;
position?: Position;
}
diff --git a/locale/en/corteza-webapp-compose/chart.yaml b/locale/en/corteza-webapp-compose/chart.yaml
index f630c2316..aa225d476 100644
--- a/locale/en/corteza-webapp-compose/chart.yaml
+++ b/locale/en/corteza-webapp-compose/chart.yaml
@@ -57,7 +57,7 @@ edit:
fieldLabel: Field
fieldPlaceholder: Select metric field
fillArea: Fill area below the line
- fixTooltips: Show tooltips
+ fixTooltips: Always show tooltips
function:
avg: AVG
label: Function
@@ -108,10 +108,10 @@ edit:
axisScaleFromZero: Always begin axis scale at zero
label: Y-axis
rotate:
- label: Rotate label
- description: Labels can be rotated from -90 to 90 degrees. Applied to bar and line charts
+ label: Rotate labels
+ description: Labels can be rotated from -90 to 90 degrees
+ valueAppliedTo: Applied to bar and line charts
labelLabel: Axis label
- labelPlaceholder: Axis label
labelPosition:
label: Label position
top: Top
@@ -126,7 +126,11 @@ edit:
legend:
label: Legend
hide: Hide legend
- showAsList: Show as list
+ orientation:
+ label: Orientation
+ horizontal: Horizontal
+ vertical: Vertical
+ scrollable: Scrollable
position:
customize: Customize position
top: Top
@@ -139,7 +143,7 @@ edit:
labelNextToChartPartition: Show labels next to chart partition
formatting:
label: Formatting
- description: '{a} - metrics field value, {b} - dimension field value, {c} - value of dimension field, {d} - percentage'
+ description: '{a} - metrics label, {b} - dimension value, {c} - metric value, {d} - metric value percentage'
placeholder: '{a}
{b} : {c} ({d}%)'
offset:
label: Offset
diff --git a/server/compose/types/chart.go b/server/compose/types/chart.go
index 1edda82b2..7d904066d 100644
--- a/server/compose/types/chart.go
+++ b/server/compose/types/chart.go
@@ -3,13 +3,14 @@ package types
import (
"database/sql/driver"
"encoding/json"
- "github.com/cortezaproject/corteza/server/pkg/locale"
- "github.com/cortezaproject/corteza/server/pkg/sql"
- "github.com/spf13/cast"
"strconv"
"strings"
"time"
+ "github.com/cortezaproject/corteza/server/pkg/locale"
+ "github.com/cortezaproject/corteza/server/pkg/sql"
+ "github.com/spf13/cast"
+
"github.com/cortezaproject/corteza/server/pkg/filter"
)
@@ -41,6 +42,9 @@ type (
Metrics []map[string]interface{} `json:"metrics,omitempty"`
Dimensions []map[string]interface{} `json:"dimensions,omitempty"`
YAxis map[string]interface{} `json:"yAxis,omitempty"`
+ Legend map[string]interface{} `json:"legend,omitempty"`
+ Tooltip map[string]interface{} `json:"tooltip,omitempty"`
+ Offset map[string]interface{} `json:"offset,omitempty"`
Renderer struct {
Version string `json:"version,omitempty" `
} `json:"renderer,omitempty"`