Sync compose and reporter chart configurator options
This commit is contained in:
Jože Fortun
parent
ef04afeeb6
commit
74e70f9ad4
@ -8,7 +8,10 @@
|
||||
</h5>
|
||||
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('display-element:chart.configurator.type')"
|
||||
label-class="text-primary"
|
||||
@ -20,7 +23,11 @@
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('display-element:chart.configurator.chart-title')"
|
||||
label-class="text-primary"
|
||||
@ -33,7 +40,10 @@
|
||||
</b-row>
|
||||
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('display-element:chart.configurator.color-scheme')"
|
||||
label-class="text-primary"
|
||||
@ -48,7 +58,8 @@
|
||||
option-text="label"
|
||||
option-value="value"
|
||||
clearable
|
||||
class="h-100 w-100"
|
||||
class="mw-100"
|
||||
style="min-width: 100%;"
|
||||
>
|
||||
<template #option="option">
|
||||
<p
|
||||
@ -64,6 +75,7 @@
|
||||
/>
|
||||
</template>
|
||||
</vue-select>
|
||||
|
||||
<template
|
||||
v-if="currentColorScheme"
|
||||
>
|
||||
@ -76,22 +88,6 @@
|
||||
</template>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-col
|
||||
align-self="center"
|
||||
>
|
||||
<b-form-checkbox
|
||||
v-model="options.showTooltips"
|
||||
class="pb-2"
|
||||
>
|
||||
{{ $t('display-element:chart.configurator.show.tooltips') }}
|
||||
</b-form-checkbox>
|
||||
<b-form-checkbox
|
||||
v-model="options.showLegend"
|
||||
class="pb-2"
|
||||
>
|
||||
{{ $t('display-element:chart.configurator.show.legend') }}
|
||||
</b-form-checkbox>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<hr>
|
||||
</div>
|
||||
@ -194,22 +190,15 @@
|
||||
</b-col>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
v-if="options.xAxis.type === 'time'"
|
||||
:label="$t('display-element:chart.configurator.time.unit.label')"
|
||||
:label="$t('display-element:chart.configurator.x-axis.labelRotation.label')"
|
||||
label-class="text-primary"
|
||||
class="mb-1"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="options.xAxis.unit"
|
||||
:options="timeUnits"
|
||||
>
|
||||
<template #first>
|
||||
<b-form-select-option
|
||||
:value="undefined"
|
||||
>
|
||||
{{ $t('display-element:chart.configurator.default') }}
|
||||
</b-form-select-option>
|
||||
</template>
|
||||
</b-form-select>
|
||||
<b-input
|
||||
v-model="options.xAxis.labelRotation"
|
||||
type="number"
|
||||
number
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
@ -243,6 +232,19 @@
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
:label="$t('display-element:chart.configurator.y-axis.labelRotation.label')"
|
||||
label-class="text-primary"
|
||||
class="mb-1"
|
||||
>
|
||||
<b-input
|
||||
v-model="options.yAxis.labelRotation"
|
||||
type="number"
|
||||
number
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row>
|
||||
@ -254,6 +256,7 @@
|
||||
<b-form-input
|
||||
v-model="options.yAxis.min"
|
||||
type="number"
|
||||
number
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
@ -283,12 +286,6 @@
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group>
|
||||
<b-form-checkbox
|
||||
v-model="options.yAxis.beginAtZero"
|
||||
>
|
||||
{{ $t('display-element:chart.configurator.begin-axis-at-zero') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-form-checkbox
|
||||
v-model="options.yAxis.type"
|
||||
value="logarithmic"
|
||||
@ -297,6 +294,12 @@
|
||||
{{ $t('display-element:chart.configurator.logarithmic-scale') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-form-checkbox
|
||||
v-model="options.yAxis.beginAtZero"
|
||||
>
|
||||
{{ $t('display-element:chart.configurator.begin-axis-at-zero') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-form-checkbox
|
||||
v-model="options.yAxis.position"
|
||||
value="right"
|
||||
@ -309,6 +312,249 @@
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div>
|
||||
<h5 class="text-primary mb-2">
|
||||
{{ $t('display-element:chart.configurator.legend.name') }}
|
||||
</h5>
|
||||
|
||||
<b-form-checkbox
|
||||
v-model="options.legend.hide"
|
||||
class="mb-3"
|
||||
>
|
||||
{{ $t('display-element:chart.configurator.legend.hide') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-row v-if="!options.legend.hide">
|
||||
<b-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('display-element:chart.configurator.legend.align.label')"
|
||||
label-class="text-primary"
|
||||
class="mb-1"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="options.legend.align"
|
||||
:options="alignments"
|
||||
:disabled="!options.legend.position.default"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('display-element:chart.configurator.legend.orientation.label')"
|
||||
label-class="text-primary"
|
||||
class="mb-1"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="options.legend.orientation"
|
||||
:options="orientations"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<b-form-checkbox
|
||||
v-model="options.legend.position.default"
|
||||
:class="{ 'mb-3': !options.legend.position.default }"
|
||||
>
|
||||
{{ $t('display-element:chart.configurator.legend.position.default') }}
|
||||
</b-form-checkbox>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<b-form-checkbox
|
||||
v-model="options.legend.scrollable"
|
||||
:disabled="options.legend.orientation !== 'horizontal'"
|
||||
>
|
||||
{{ $t('display-element:chart.configurator.legend.scrollable') }}
|
||||
</b-form-checkbox>
|
||||
</b-col>
|
||||
|
||||
<template
|
||||
v-if="!options.legend.position.default"
|
||||
>
|
||||
<b-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
xl="3"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('display-element:chart.configurator.legend.position.top')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="options.legend.position.top"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
xl="3"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('display-element:chart.configurator.legend.position.right')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="options.legend.position.right"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
xl="3"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('display-element:chart.configurator.legend.position.bottom')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="options.legend.position.bottom"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
xl="3"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('display-element:chart.configurator.legend.position.left')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="options.legend.position.left"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col>
|
||||
<small>{{ $t('display-element:chart.configurator.position-description') }}</small>
|
||||
</b-col>
|
||||
</template>
|
||||
</b-row>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div>
|
||||
<h5 class="text-primary mb-2">
|
||||
{{ $t('display-element:chart.configurator.tooltips.name') }}
|
||||
</h5>
|
||||
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-checkbox
|
||||
v-model="options.showTooltipsAlways"
|
||||
>
|
||||
{{ $t('display-element:chart.configurator.tooltips.show.always') }}
|
||||
</b-form-checkbox>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="mb-2">
|
||||
<h5 class="text-primary mb-2">
|
||||
{{ $t('display-element:chart.configurator.offset.name') }}
|
||||
</h5>
|
||||
|
||||
<b-form-checkbox
|
||||
v-model="options.offset.default"
|
||||
class="mb-3"
|
||||
>
|
||||
{{ $t('display-element:chart.configurator.offset.default') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-row v-if="!options.offset.default">
|
||||
<b-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
xl="3"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('display-element:chart.configurator.offset.top')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="options.offset.top"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
xl="3"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('display-element:chart.configurator.offset.right')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="options.offset.right"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
xl="3"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('display-element:chart.configurator.offset.bottom')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="options.offset.bottom"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
xl="3"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('display-element:chart.configurator.offset.left')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="options.offset.left"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
>
|
||||
<small>{{ $t('display-element:chart.configurator.position-description') }}</small>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -350,6 +596,17 @@ export default {
|
||||
{ value: 'center', text: this.$t('display-element:chart.configurator.y-axis.labelPosition.center') },
|
||||
{ value: 'start', text: this.$t('display-element:chart.configurator.y-axis.labelPosition.bottom') },
|
||||
],
|
||||
|
||||
orientations: [
|
||||
{ value: 'horizontal', text: this.$t('display-element:chart.configurator.legend.orientation.horizontal') },
|
||||
{ value: 'vertical', text: this.$t('display-element:chart.configurator.legend.orientation.vertical') },
|
||||
],
|
||||
|
||||
alignments: [
|
||||
{ value: 'left', text: this.$t('display-element:chart.configurator.legend.align.left') },
|
||||
{ value: 'center', text: this.$t('display-element:chart.configurator.legend.align.center') },
|
||||
{ value: 'right', text: this.$t('display-element:chart.configurator.legend.align.right') },
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -61,7 +61,6 @@ th {
|
||||
|
||||
.v-select {
|
||||
min-width: 20vw;
|
||||
max-width: 300px;
|
||||
|
||||
&:not(.vs--open) .vs__selected + .vs__search {
|
||||
width: 0;
|
||||
|
||||
@ -12,11 +12,13 @@ interface XAxisOptions {
|
||||
unit?: string;
|
||||
skipMissing: boolean;
|
||||
defaultValue?: any;
|
||||
labelRotation: number;
|
||||
}
|
||||
|
||||
interface YAxisOptions {
|
||||
label?: string;
|
||||
labelPosition?: string;
|
||||
labelRotation: number;
|
||||
type?: string;
|
||||
position?: string;
|
||||
beginAtZero?: boolean;
|
||||
@ -25,32 +27,77 @@ interface YAxisOptions {
|
||||
max?: string;
|
||||
}
|
||||
|
||||
interface Legend {
|
||||
hide: boolean;
|
||||
orientation: string;
|
||||
align: string;
|
||||
scrollable: boolean;
|
||||
position: Offset;
|
||||
}
|
||||
|
||||
interface Tooltips {
|
||||
showAlways: boolean;
|
||||
}
|
||||
|
||||
interface Offset {
|
||||
default: boolean;
|
||||
top?: string;
|
||||
right?: string;
|
||||
bottom?: string;
|
||||
left?: string;
|
||||
}
|
||||
|
||||
export class ChartOptions {
|
||||
public title = ''
|
||||
public type = 'bar'
|
||||
public colorScheme = ''
|
||||
public source = ''
|
||||
public datasources: Array<FrameDefinition> = []
|
||||
public showTooltips = true
|
||||
public showLegend = true
|
||||
|
||||
public xAxis: XAxisOptions = {
|
||||
type: '',
|
||||
skipMissing: true,
|
||||
labelRotation: 0,
|
||||
}
|
||||
|
||||
public yAxis: YAxisOptions = {
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
labelPosition: 'end',
|
||||
labelRotation: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
|
||||
public legend: Legend = {
|
||||
hide: false,
|
||||
orientation: 'horizontal',
|
||||
align: 'center',
|
||||
scrollable: true,
|
||||
position: {
|
||||
default: true,
|
||||
top: undefined,
|
||||
right: undefined,
|
||||
bottom: undefined,
|
||||
left: undefined,
|
||||
}
|
||||
}
|
||||
|
||||
public tooltips: Tooltips = {
|
||||
showAlways: false,
|
||||
}
|
||||
|
||||
public offset: Offset = {
|
||||
default: true,
|
||||
top: undefined,
|
||||
right: undefined,
|
||||
bottom: undefined,
|
||||
left: undefined,
|
||||
}
|
||||
|
||||
constructor (o: PartialChartOptions = {}) {
|
||||
if (!o) return
|
||||
|
||||
Apply(this, o, String, 'title', 'type', 'colorScheme', 'source')
|
||||
Apply(this, o, Boolean, 'showTooltips', 'showLegend')
|
||||
|
||||
if (o.datasources) {
|
||||
this.datasources = o.datasources
|
||||
@ -63,6 +110,18 @@ export class ChartOptions {
|
||||
if (o.yAxis) {
|
||||
this.yAxis = { ...this.yAxis, ...o.yAxis }
|
||||
}
|
||||
|
||||
if (o.legend) {
|
||||
this.legend = { ...this.legend, ...o.legend }
|
||||
}
|
||||
|
||||
if (o.tooltips) {
|
||||
this.tooltips = { ...this.tooltips, ...o.tooltips }
|
||||
}
|
||||
|
||||
if (o.offset) {
|
||||
this.offset = { ...this.offset, ...o.offset }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@ export class BasicChartOptions extends ChartOptions {
|
||||
xAxis: [],
|
||||
yAxis: [],
|
||||
tooltip: {
|
||||
show: this.showTooltips,
|
||||
show: true,
|
||||
appendToBody: true,
|
||||
},
|
||||
}
|
||||
@ -52,11 +52,11 @@ export class BasicChartOptions extends ChartOptions {
|
||||
formatter: '{a}<br />{b} : {c} ({d}%)',
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
show: this.showTooltipsAlways,
|
||||
position: 'inside',
|
||||
align: 'center',
|
||||
verticalAlign: 'middle',
|
||||
fontSize: 14,
|
||||
formatter: '{c} ({d}%)',
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
@ -73,12 +73,20 @@ export class BasicChartOptions extends ChartOptions {
|
||||
data: labels.map((name, i) => {
|
||||
return { name, value: data[i] }
|
||||
}),
|
||||
top: this.offset.default ? undefined : this.offset.top,
|
||||
right: this.offset.default ? undefined : this.offset.right,
|
||||
bottom: this.offset.default ? undefined : this.offset.bottom,
|
||||
left: this.offset.default ? undefined : this.offset.left,
|
||||
}
|
||||
})
|
||||
} else if (['bar', 'line'].includes(this.type)) {
|
||||
options.tooltip.trigger = 'axis'
|
||||
|
||||
const { label: xLabel, type: xType = 'category' } = this.xAxis
|
||||
const {
|
||||
label: xLabel,
|
||||
type: xType = 'category',
|
||||
labelRotation: xLabelRotation = 0
|
||||
} = this.xAxis
|
||||
|
||||
options.xAxis = [
|
||||
{
|
||||
@ -91,20 +99,22 @@ export class BasicChartOptions extends ChartOptions {
|
||||
interval: 0,
|
||||
overflow: 'truncate',
|
||||
hideOverlap: true,
|
||||
rotate: xLabelRotation,
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
options.grid = {
|
||||
top: this.title ? 70 : 45,
|
||||
bottom: xLabel ? 30 : 25,
|
||||
left: 40,
|
||||
right: 40,
|
||||
top: this.offset.default ? (this.title ? 70 : 45) : this.offset.top,
|
||||
right: this.offset.default ? 30 : this.offset.right,
|
||||
bottom: this.offset.default ? (xLabel ? 30 : 25) : this.offset.bottom,
|
||||
left: this.offset.default ? 30 : this.offset.left,
|
||||
containLabel: true,
|
||||
}
|
||||
|
||||
const {
|
||||
label: yLabel,
|
||||
labelRotation: yLabelRotation = 0,
|
||||
type: yType = 'linear',
|
||||
position = 'left',
|
||||
labelPosition = 'end',
|
||||
@ -125,6 +135,7 @@ export class BasicChartOptions extends ChartOptions {
|
||||
interval: 0,
|
||||
overflow: 'truncate',
|
||||
hideOverlap: true,
|
||||
rotate: yLabelRotation,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -152,11 +163,10 @@ export class BasicChartOptions extends ChartOptions {
|
||||
areaStyle: {},
|
||||
left: 'left',
|
||||
label: {
|
||||
show: false,
|
||||
show: this.showTooltipsAlways,
|
||||
position: 'inside',
|
||||
align: 'center',
|
||||
verticalAlign: 'middle',
|
||||
fontSize: 14,
|
||||
},
|
||||
data: xType === 'time' ? labels.map((name, i) => {
|
||||
return [moment(name).valueOf() || undefined, data[i]]
|
||||
@ -178,9 +188,13 @@ export class BasicChartOptions extends ChartOptions {
|
||||
fontFamily: 'Poppins-Regular',
|
||||
},
|
||||
legend: {
|
||||
show: this.showLegend,
|
||||
top: this.title ? 25 : undefined,
|
||||
type: 'scroll',
|
||||
show: !this.legend.hide,
|
||||
type: this.legend.scrollable ? 'scroll' : 'plain',
|
||||
top: (this.legend.position.default ? (this.title ? 25 : undefined) : this.legend.position.top) || undefined,
|
||||
right: (this.legend.position.default ? undefined : this.legend.position.right) || undefined,
|
||||
bottom: (this.legend.position.default ? undefined : this.legend.position.bottom) || undefined,
|
||||
left: (this.legend.position.default ? this.legend.align || 'center' : this.legend.position.left) || 'auto',
|
||||
orient: this.legend.orientation || 'horizontal'
|
||||
},
|
||||
...options,
|
||||
}
|
||||
|
||||
@ -36,42 +36,40 @@ export class FunnelChartOptions extends ChartOptions {
|
||||
fontFamily: 'Poppins-Regular',
|
||||
},
|
||||
tooltip: {
|
||||
show: this.showTooltips,
|
||||
show: true,
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c} ({d}%)',
|
||||
appendToBody: true,
|
||||
},
|
||||
legend: {
|
||||
show: this.showLegend,
|
||||
top: this.title ? 25 : undefined,
|
||||
type: 'scroll',
|
||||
show: !this.legend.hide,
|
||||
type: this.legend.scrollable ? 'scroll' : 'plain',
|
||||
top: (this.legend.position.default ? (this.title ? 25 : undefined) : this.legend.position.top) || undefined,
|
||||
right: (this.legend.position.default ? undefined : this.legend.position.right) || undefined,
|
||||
bottom: (this.legend.position.default ? undefined : this.legend.position.bottom) || undefined,
|
||||
left: (this.legend.position.default ? this.legend.align || 'center' : this.legend.position.left) || 'auto',
|
||||
orient: this.legend.orientation || 'horizontal'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'funnel',
|
||||
name: this.labelColumn,
|
||||
sort: 'descending',
|
||||
min: 1,
|
||||
top: this.title ? 60 : 35,
|
||||
left: '5%',
|
||||
bottom: '5%',
|
||||
width: '90%',
|
||||
label: {
|
||||
show: false,
|
||||
show: this.showTooltipsAlways,
|
||||
position: 'inside',
|
||||
align: 'center',
|
||||
verticalAlign: 'middle',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: !this.showTooltips,
|
||||
fontSize: 14,
|
||||
formatter: '{c} ({d}%)',
|
||||
},
|
||||
formatter: '{c} ({d}%)',
|
||||
},
|
||||
data: labels.map((name, i) => {
|
||||
return { name, value: data[i], itemStyle: { color: colors[i] } }
|
||||
}),
|
||||
top: this.offset.default ? (this.title ? 60 : 35) : this.offset.top,
|
||||
right: this.offset.default ? '5%' : this.offset.right,
|
||||
bottom: this.offset.default ? '5%' : this.offset.bottom,
|
||||
left: this.offset.default ? '5%' : this.offset.left,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
@ -10,16 +10,14 @@ chart:
|
||||
general: General
|
||||
label-column: Label column
|
||||
logarithmic-scale: Logarithmic scale
|
||||
position-description: Values can be set as pixels (20) or as percentages (20%)
|
||||
none: None
|
||||
place-axis-on-right-side: Place axis on the right side
|
||||
show:
|
||||
tooltips: Show tooltips
|
||||
legend: Show legend
|
||||
skip-missing-values: Skip missing values
|
||||
step-size: Step size
|
||||
time:
|
||||
label: Time
|
||||
unit:
|
||||
unit:
|
||||
label: Time unit
|
||||
types:
|
||||
date: Date
|
||||
@ -37,10 +35,12 @@ chart:
|
||||
value:
|
||||
max: Max value
|
||||
min: Min value
|
||||
x-axis:
|
||||
x-axis:
|
||||
name: X-Axis
|
||||
label: Axis label
|
||||
type: Axis type
|
||||
labelRotation:
|
||||
label: Rotate labels
|
||||
y-axis:
|
||||
name: Y-Axis
|
||||
label: Axis label
|
||||
@ -49,6 +49,39 @@ chart:
|
||||
top: Top
|
||||
center: Center
|
||||
bottom: Bottom
|
||||
labelRotation:
|
||||
label: Rotate labels
|
||||
legend:
|
||||
name: Legend
|
||||
hide: Hide legend
|
||||
scrollable: Scrollable
|
||||
orientation:
|
||||
label: Orientation
|
||||
horizontal: Horizontal
|
||||
vertical: Vertical
|
||||
align:
|
||||
label: Align
|
||||
left: Left
|
||||
right: Right
|
||||
center: Center
|
||||
position:
|
||||
description: Values c
|
||||
default: Default position
|
||||
top: Top
|
||||
right: Right
|
||||
bottom: Bottom
|
||||
left: Left
|
||||
tooltips:
|
||||
name: Tooltips
|
||||
show:
|
||||
always: Always show tooltips
|
||||
offset:
|
||||
name: Offset
|
||||
default: Default offset
|
||||
top: Top
|
||||
right: Right
|
||||
bottom: Bottom
|
||||
left: Left
|
||||
metric:
|
||||
configurator:
|
||||
color:
|
||||
@ -70,7 +103,7 @@ table:
|
||||
light: Light
|
||||
none: None
|
||||
table:
|
||||
options:
|
||||
options:
|
||||
bordered: Bordered
|
||||
borderless: Borderless
|
||||
dark: Dark
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user