Adjust chart configurator styles and logic
This commit is contained in:
Jože Fortun
@@ -7,70 +7,57 @@
|
||||
un-skippable
|
||||
>
|
||||
<template #dimension-options="{ index, dimension, field }">
|
||||
<c-item-picker
|
||||
v-if="showPicker(field)"
|
||||
:value="getOptions(dimension)"
|
||||
:options="field.options.options"
|
||||
:labels="{
|
||||
searchPlaceholder:$t('edit.dimension.optionsPicker.searchPlaceholder'),
|
||||
availableItems: $t('edit.dimension.optionsPicker.availableItems'),
|
||||
selectAllItems: $t('edit.dimension.optionsPicker.selectAllItems'),
|
||||
selectedItems: $t('edit.dimension.optionsPicker.selectedItems'),
|
||||
unselectAllItems: $t('edit.dimension.optionsPicker.unselectAllItems'),
|
||||
noItemsFound: $t('edit.dimension.optionsPicker.noItemsFound'),
|
||||
}"
|
||||
class="d-flex flex-column"
|
||||
style="height: 100% !important;"
|
||||
@update:value="setOptions(index, field, $event)"
|
||||
/>
|
||||
<b-form-group
|
||||
:label="$t('edit.dimension.options.label')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<c-item-picker
|
||||
v-if="showPicker(field)"
|
||||
:value="getOptions(dimension)"
|
||||
:options="field.options.options"
|
||||
:labels="{
|
||||
searchPlaceholder:$t('edit.dimension.optionsPicker.searchPlaceholder'),
|
||||
availableItems: $t('edit.dimension.optionsPicker.availableItems'),
|
||||
selectAllItems: $t('edit.dimension.optionsPicker.selectAllItems'),
|
||||
selectedItems: $t('edit.dimension.optionsPicker.selectedItems'),
|
||||
unselectAllItems: $t('edit.dimension.optionsPicker.unselectAllItems'),
|
||||
noItemsFound: $t('edit.dimension.optionsPicker.noItemsFound'),
|
||||
}"
|
||||
class="d-flex flex-column"
|
||||
style="height: 100% !important;"
|
||||
@update:value="setOptions(index, field, $event)"
|
||||
/>
|
||||
</b-form-group>
|
||||
</template>
|
||||
|
||||
<template #metric-options="{ metric }">
|
||||
<b-row
|
||||
class="text-primary"
|
||||
>
|
||||
<b-row>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
offset-md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.cumulative')"
|
||||
:label="$t('edit.metric.options.label')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<c-input-checkbox
|
||||
<b-form-checkbox
|
||||
v-model="metric.cumulative"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
>
|
||||
{{ $t('edit.metric.cumulative') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.relative')"
|
||||
>
|
||||
<c-input-checkbox
|
||||
<b-form-checkbox
|
||||
v-model="metric.relativeValue"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
>
|
||||
{{ $t('edit.metric.relative') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.fixTooltips')"
|
||||
>
|
||||
<c-input-checkbox
|
||||
<b-form-checkbox
|
||||
v-model="metric.fixTooltips"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
/>
|
||||
>
|
||||
{{ $t('edit.metric.fixTooltips') }}
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<template #dimension-options="{ dimension }">
|
||||
<b-form-group
|
||||
:label="$t('edit.dimension.gaugeSteps')"
|
||||
class="text-primary"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input-group
|
||||
v-for="(step, i) in dimension.meta.steps"
|
||||
@@ -61,9 +61,7 @@
|
||||
</template>
|
||||
|
||||
<template #metric-options="{ metric }">
|
||||
<b-row
|
||||
class="text-primary"
|
||||
>
|
||||
<b-row>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
@@ -71,6 +69,7 @@
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.fx.label')"
|
||||
:description="$t('edit.metric.fx.description')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-form-textarea
|
||||
v-model="metric.fx"
|
||||
@@ -84,13 +83,14 @@
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.fixTooltips')"
|
||||
:label="$t('edit.metric.options.label')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<c-input-checkbox
|
||||
<b-form-checkbox
|
||||
v-model="metric.fixTooltips"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
/>
|
||||
>
|
||||
{{ $t('edit.metric.fixTooltips') }}
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
@@ -11,15 +11,14 @@
|
||||
{{ $t('edit.yAxis.label') }}
|
||||
</h5>
|
||||
|
||||
<b-row
|
||||
class="text-primary"
|
||||
>
|
||||
<b-row>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.yAxis.labelLabel')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input-group>
|
||||
<b-form-input
|
||||
@@ -44,6 +43,7 @@
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.yAxis.labelPosition.label')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="report.yAxis.labelPosition"
|
||||
@@ -58,6 +58,7 @@
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.yAxis.minLabel')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="report.yAxis.min"
|
||||
@@ -73,6 +74,7 @@
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.yAxis.maxLabel')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="report.yAxis.max"
|
||||
@@ -89,6 +91,7 @@
|
||||
<b-form-group
|
||||
:label="$t('edit.yAxis.rotate.label')"
|
||||
:description="$t('edit.yAxis.rotate.description')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.yAxis.rotateLabel"
|
||||
@@ -103,6 +106,7 @@
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.yAxis.options.label')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-form-checkbox
|
||||
v-model="report.yAxis.axisType"
|
||||
@@ -134,13 +138,12 @@
|
||||
<template #metric-options="{ metric }">
|
||||
<b-row>
|
||||
<b-col
|
||||
v-if="!['pie', 'doughnut'].includes(metric.type)"
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.labelLabel')"
|
||||
class="text-primary"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input-group>
|
||||
<b-form-input
|
||||
@@ -165,7 +168,7 @@
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.output.label')"
|
||||
class="text-primary"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="metric.type"
|
||||
@@ -189,7 +192,7 @@
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.fx.label')"
|
||||
:description="$t('edit.metric.fx.description')"
|
||||
class="text-primary"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-form-textarea
|
||||
v-model="metric.fx"
|
||||
@@ -199,53 +202,32 @@
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
v-if="true"
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.relative')"
|
||||
class="text-primary"
|
||||
:label="$t('edit.metric.options.label')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<c-input-checkbox
|
||||
:value="!!metric.relativeValue"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
@change="$set(metric,'relativeValue', $event)"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-form-checkbox
|
||||
v-if="hasRelativeDisplay(metric)"
|
||||
v-model="metric.relativeValue"
|
||||
>
|
||||
{{ $t('edit.metric.relative') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-col
|
||||
v-if="metric.type === 'line'"
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.fillArea')"
|
||||
class="text-primary"
|
||||
>
|
||||
<c-input-checkbox
|
||||
<b-form-checkbox
|
||||
v-if="metric.type === 'line'"
|
||||
v-model="metric.fill"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
>
|
||||
{{ $t('edit.metric.fillArea') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.fixTooltips')"
|
||||
class="text-primary"
|
||||
>
|
||||
<c-input-checkbox
|
||||
<b-form-checkbox
|
||||
v-model="metric.fixTooltips"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
/>
|
||||
>
|
||||
{{ $t('edit.metric.fixTooltips') }}
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
@@ -267,7 +249,7 @@
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.legend.orientation.label')"
|
||||
class="text-primary"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="report.legend.orientation"
|
||||
@@ -281,12 +263,13 @@
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.legend.hide')"
|
||||
class="text-primary"
|
||||
:label="$t('edit.additionalConfig.legend.show')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<c-input-checkbox
|
||||
:value="!!report.legend.isHidden"
|
||||
switch
|
||||
invert
|
||||
:labels="checkboxLabel"
|
||||
@input="$set(report.legend,'isHidden', $event)"
|
||||
/>
|
||||
@@ -301,7 +284,7 @@
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.legend.align.label')"
|
||||
class="text-primary"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="report.legend.align"
|
||||
@@ -316,8 +299,8 @@
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="'Options'"
|
||||
class="text-primary"
|
||||
:label="$t('edit.additionalConfig.legend.options.label')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-form-checkbox
|
||||
v-model="report.legend.isScrollable"
|
||||
@@ -333,117 +316,132 @@
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-row
|
||||
v-if="true"
|
||||
class="px-3 pt-3"
|
||||
>
|
||||
<h6
|
||||
class="text-secondary px-3"
|
||||
>{{ $t('edit.additionalConfig.legend.valueRange') }}</h6>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.legend.position.top')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.legend.position.top"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.legend.position.right')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.legend.position.right"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.legend.position.bottom')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.legend.position.bottom"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.legend.position.left')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.legend.position.left"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-row>
|
||||
</div>
|
||||
|
||||
<template v-if="!hasAxis">
|
||||
<hr>
|
||||
<div class="px-3 text-primary">
|
||||
<h5 class="mb-3">
|
||||
{{ $t('edit.additionalConfig.tooltip.label') }}
|
||||
</h5>
|
||||
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.tooltip.formatting.label')"
|
||||
:description="$t('edit.additionalConfig.tooltip.formatting.description')"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.tooltip.formatting"
|
||||
:placeholder="$t('edit.additionalConfig.tooltip.formatting.placeholder')"
|
||||
/>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.tooltip.labelNextToChartPartition')"
|
||||
>
|
||||
<c-input-checkbox
|
||||
v-model="report.tooltip.labelsNextToPartition"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
/>
|
||||
</b-form-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<hr>
|
||||
<div class="px-3">
|
||||
<h5 class="mb-3">
|
||||
{{ $t('edit.additionalConfig.offset.label') }}
|
||||
</h5>
|
||||
|
||||
<b-row
|
||||
class="text-primary"
|
||||
v-if="!report.legend.position.isDefault"
|
||||
>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.legend.position.top')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.legend.position.top"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.legend.position.right')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.legend.position.right"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.legend.position.bottom')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.legend.position.bottom"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.legend.position.left')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.legend.position.left"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col cols="12">
|
||||
<small class="text-muted">
|
||||
{{ $t('edit.additionalConfig.legend.valueRange') }}
|
||||
</small>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
|
||||
<template v-if="!hasAxis">
|
||||
<hr>
|
||||
<div class="px-3">
|
||||
<h5 class="mb-3">
|
||||
{{ $t('edit.additionalConfig.tooltip.label') }}
|
||||
</h5>
|
||||
|
||||
<b-row>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.tooltip.formatting.label')"
|
||||
:description="$t('edit.additionalConfig.tooltip.formatting.description')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.tooltip.formatting"
|
||||
:placeholder="$t('edit.additionalConfig.tooltip.formatting.placeholder')"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.tooltip.labelNextToChart')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<c-input-checkbox
|
||||
:value="!!report.tooltip.labelsNextToPartition"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
@input="$set(report.tooltip, 'labelsNextToPartition', $event)"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<hr>
|
||||
<div class="px-3 mb-2">
|
||||
<h5 class="mb-3">
|
||||
{{ $t('edit.additionalConfig.offset.label') }}
|
||||
</h5>
|
||||
|
||||
<b-row>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.offset.default')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<c-input-checkbox
|
||||
v-model="report.offset.isDefault"
|
||||
@@ -457,7 +455,6 @@
|
||||
|
||||
<b-row
|
||||
v-if="!report.offset.isDefault"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-col
|
||||
cols="12"
|
||||
@@ -465,6 +462,7 @@
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.offset.position.top')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.offset.top"
|
||||
@@ -478,6 +476,7 @@
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.offset.position.right')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.offset.right"
|
||||
@@ -491,6 +490,7 @@
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.offset.position.bottom')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.offset.bottom"
|
||||
@@ -504,13 +504,19 @@
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.offset.position.left')"
|
||||
:description="$t('edit.additionalConfig.offset.valueRange')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.offset.left"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col cols="12">
|
||||
<small class="text-muted">
|
||||
{{ $t('edit.additionalConfig.offset.valueRange') }}
|
||||
</small>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -12,10 +12,10 @@
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.module.label')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="moduleID"
|
||||
@@ -38,10 +38,10 @@
|
||||
v-if="!!module"
|
||||
cols="12"
|
||||
md="6"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.filter.label')"
|
||||
:label="$t('edit.filter.preset')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="report.filter"
|
||||
@@ -59,26 +59,27 @@
|
||||
<!-- Configure report filters -->
|
||||
<b-col
|
||||
v-if="!!module"
|
||||
class="mt-1 text-primary"
|
||||
cols="12"
|
||||
class="mt-1"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.filter.label')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-form-textarea
|
||||
v-model="report.filter"
|
||||
:placeholder="$t('edit.filter.placeholder')"
|
||||
/>
|
||||
<b-form-text>
|
||||
<i18next
|
||||
path="edit.filter.footnote"
|
||||
tag="label"
|
||||
>
|
||||
<code>${recordID}</code>
|
||||
<code>${ownerID}</code>
|
||||
<code>${userID}</code>
|
||||
</i18next>
|
||||
</b-form-text>
|
||||
|
||||
<i18next
|
||||
path="edit.filter.footnote"
|
||||
tag="small"
|
||||
class="text-muted"
|
||||
>
|
||||
<code>${recordID}</code>
|
||||
<code>${ownerID}</code>
|
||||
<code>${userID}</code>
|
||||
</i18next>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
@@ -99,16 +100,14 @@
|
||||
</h5>
|
||||
|
||||
<template v-if="usesDimensionsField">
|
||||
<b-row
|
||||
class="text-primary"
|
||||
>
|
||||
<b-row>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.dimension.fieldLabel')"
|
||||
class="text-primary"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="d.field"
|
||||
@@ -132,7 +131,7 @@
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.dimension.function.label')"
|
||||
class="text-primary"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="d.modifier"
|
||||
@@ -160,7 +159,7 @@
|
||||
<b-form-group
|
||||
:label="$t('edit.dimension.rotate.label')"
|
||||
:description="$t('edit.dimension.rotate.description')"
|
||||
class="text-primary"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="d.rotateLabel"
|
||||
@@ -175,15 +174,14 @@
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.dimension.skipMissingValues')"
|
||||
class="text-primary"
|
||||
:label="$t('edit.dimension.options.label')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<c-input-checkbox
|
||||
:value="!!d.skipMissing"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
@change="d.skipMissing = $event"
|
||||
/>
|
||||
<b-form-checkbox
|
||||
v-model="d.skipMissing"
|
||||
>
|
||||
{{ $t('edit.dimension.skipMissingValues') }}
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
@@ -195,7 +193,7 @@
|
||||
<b-form-group
|
||||
:label="$t('edit.dimension.defaultValueLabel')"
|
||||
:description="$t('edit.dimension.defaultValueFootnote')"
|
||||
class="text-primary"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="d.default"
|
||||
@@ -237,30 +235,39 @@
|
||||
<draggable
|
||||
class="metrics mb-3"
|
||||
:list.sync="metrics"
|
||||
handle=".metric-handle"
|
||||
handle=".grab"
|
||||
:group="`metrics_${moduleID}`"
|
||||
>
|
||||
<fieldset
|
||||
<div
|
||||
v-for="(m,i) in metrics"
|
||||
:key="i"
|
||||
class="main-fieldset mb-3"
|
||||
class="rounded border border-light p-3 mb-3"
|
||||
style="background-color: #F9FAFB;"
|
||||
>
|
||||
<h5
|
||||
v-if="metrics.length > 1"
|
||||
class="d-flex align-items-center mb-3"
|
||||
>
|
||||
<font-awesome-icon
|
||||
class="grab metric-handle align-baseline text-secondary mr-2"
|
||||
:icon="['fas', 'grip-vertical']"
|
||||
/>
|
||||
{{ $t('edit.metric.label') }} {{ i + 1 }}
|
||||
<b-button
|
||||
variant="link"
|
||||
class="text-danger align-baseline"
|
||||
@click.prevent="removeMetric(i)"
|
||||
>
|
||||
<font-awesome-icon :icon="['far', 'trash-alt']" />
|
||||
</b-button>
|
||||
|
||||
<div class="d-flex align-items-center ml-auto">
|
||||
<c-input-confirm
|
||||
class="mr-2"
|
||||
@confirmed="removeMetric(i)"
|
||||
/>
|
||||
|
||||
<b-button
|
||||
variant="link"
|
||||
size="sm"
|
||||
:disabled="true"
|
||||
class="ml-auto px-0"
|
||||
>
|
||||
<font-awesome-icon
|
||||
class="grab text-secondary"
|
||||
:icon="['fas', 'bars']"
|
||||
/>
|
||||
</b-button>
|
||||
</div>
|
||||
</h5>
|
||||
|
||||
<b-row>
|
||||
@@ -270,7 +277,7 @@
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.fieldLabel')"
|
||||
class="text-primary"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="m.field"
|
||||
@@ -294,7 +301,7 @@
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.function.label')"
|
||||
class="text-primary"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="m.aggregate"
|
||||
@@ -317,9 +324,10 @@
|
||||
name="metric-options"
|
||||
:metric="m"
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
|
||||
<hr v-if="!!module && hasAxis">
|
||||
|
||||
<template v-if="hasAxis">
|
||||
@@ -327,8 +335,8 @@
|
||||
name="y-axis"
|
||||
:report="editReport"
|
||||
/>
|
||||
<hr>
|
||||
</template>
|
||||
<hr v-if="hasAxis">
|
||||
|
||||
<slot
|
||||
name="additional-config"
|
||||
|
||||
@@ -34,224 +34,215 @@
|
||||
class="float-right"
|
||||
/>
|
||||
</b-card-header>
|
||||
<b-container
|
||||
fluid
|
||||
class="p-0"
|
||||
>
|
||||
<b-row>
|
||||
<b-col
|
||||
md="7"
|
||||
sm="12"
|
||||
|
||||
<b-row no-gutters>
|
||||
<b-col
|
||||
md="7"
|
||||
sm="12"
|
||||
class="border-right"
|
||||
>
|
||||
<div
|
||||
class="pt-3 px-3"
|
||||
>
|
||||
<div
|
||||
class="pt-3 px-3"
|
||||
<h5>
|
||||
{{ $t('generalSettings') }}
|
||||
</h5>
|
||||
<b-row
|
||||
v-if="modules"
|
||||
>
|
||||
<h5>
|
||||
{{ $t('generalSettings') }}
|
||||
</h5>
|
||||
<b-row
|
||||
v-if="modules"
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
<b-form-group
|
||||
:label="$t('name')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('name')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="chart.name"
|
||||
:state="nameState"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-form-input
|
||||
v-model="chart.name"
|
||||
:state="nameState"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('handle')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('handle')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="chart.handle"
|
||||
:placeholder="$t('general.placeholder.handle')"
|
||||
:state="handleState"
|
||||
class="mb-1"
|
||||
/>
|
||||
<b-form-invalid-feedback :state="handleState">
|
||||
{{ $t('general.placeholder.invalid-handle-characters') }}
|
||||
</b-form-invalid-feedback>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-form-input
|
||||
v-model="chart.handle"
|
||||
:placeholder="$t('general.placeholder.handle')"
|
||||
:state="handleState"
|
||||
class="mb-1"
|
||||
/>
|
||||
<b-form-invalid-feedback :state="handleState">
|
||||
{{ $t('general.placeholder.invalid-handle-characters') }}
|
||||
</b-form-invalid-feedback>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('colorScheme.label')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<div
|
||||
:label="$t('colorScheme.label')"
|
||||
<vue-select
|
||||
v-model="chart.config.colorScheme"
|
||||
:options="colorSchemes"
|
||||
:reduce="cs => cs.value"
|
||||
label="label"
|
||||
option-text="label"
|
||||
option-value="value"
|
||||
:placeholder="$t('colorScheme.placeholder')"
|
||||
:calculate-position="calculateDropdownPosition"
|
||||
class="color-selector bg-white"
|
||||
>
|
||||
<vue-select
|
||||
v-model="chart.config.colorScheme"
|
||||
:options="colorSchemes"
|
||||
:get-option-key="getOptionKey"
|
||||
:reduce="cs => cs.value"
|
||||
label="label"
|
||||
option-text="label"
|
||||
option-value="value"
|
||||
:placeholder="$t('colorScheme.placeholder')"
|
||||
:calculate-position="calculateDropdownPosition"
|
||||
class="color-selector bg-white"
|
||||
>
|
||||
<template #option="option">
|
||||
<p
|
||||
class="mb-1"
|
||||
>
|
||||
{{ option.label }}
|
||||
</p>
|
||||
<div
|
||||
v-for="(color, index) in option.colors"
|
||||
:key="`${option.value}-${index}`"
|
||||
:style="`background: ${color};`"
|
||||
class="d-inline-block color-box mr-1 mb-1"
|
||||
/>
|
||||
</template>
|
||||
</vue-select>
|
||||
|
||||
<template
|
||||
v-if="currentColorScheme"
|
||||
>
|
||||
<template #option="option">
|
||||
<p
|
||||
class="mb-1"
|
||||
>
|
||||
{{ option.label }}
|
||||
</p>
|
||||
<div
|
||||
v-for="(color, index) in currentColorScheme.colors"
|
||||
:key="`${currentColorScheme.value}-${index}`"
|
||||
v-for="(color, index) in option.colors"
|
||||
:key="`${option.value}-${index}`"
|
||||
:style="`background: ${color};`"
|
||||
class="d-inline-block color-box mr-1"
|
||||
class="d-inline-block color-box mr-1 mb-1"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</b-col>
|
||||
</vue-select>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
class="mt-2 mt-md-0"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.animation.enabled')"
|
||||
class="text-primary"
|
||||
<template
|
||||
v-if="currentColorScheme"
|
||||
>
|
||||
<c-input-checkbox
|
||||
v-model="chart.config.noAnimation"
|
||||
:labels="checkboxLabel"
|
||||
switch
|
||||
invert
|
||||
<div
|
||||
v-for="(color, index) in currentColorScheme.colors"
|
||||
:key="`${currentColorScheme.value}-${index}`"
|
||||
:style="`background: ${color};`"
|
||||
class="d-inline-block color-box mr-1"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
<hr v-if="modules">
|
||||
</template>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<!-- Some charts support multiple reports -->
|
||||
<fieldset
|
||||
v-if="supportsMultipleReports"
|
||||
class="form-group"
|
||||
>
|
||||
<b-form-group class=" px-3">
|
||||
<h5 class="d-inline-block">
|
||||
{{ $t('configure.reportsLabel') }}
|
||||
</h5>
|
||||
|
||||
<b-btn
|
||||
v-if="reportsValid"
|
||||
class="float-right p-0"
|
||||
variant="link"
|
||||
@click="onAddReport"
|
||||
>
|
||||
+ {{ $t('general.label.add') }}
|
||||
</b-btn>
|
||||
|
||||
<div>
|
||||
<draggable
|
||||
v-model="reports"
|
||||
handle=".handle"
|
||||
tag="tbody"
|
||||
class="w-100 d-inline-block"
|
||||
>
|
||||
<report-item
|
||||
v-for="(r, i) in reports"
|
||||
:key="i"
|
||||
:report="r"
|
||||
:fixed="reports.length === 1"
|
||||
@edit="onEditReport(i)"
|
||||
@remove="onRemoveReport(i)"
|
||||
>
|
||||
<template #report-label>
|
||||
<template v-if="r.moduleID">
|
||||
{{ moduleName(r.moduleID) }}
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
{{ $t('edit.unconfiguredReport') }}
|
||||
</template>
|
||||
</template>
|
||||
</report-item>
|
||||
</draggable>
|
||||
</div>
|
||||
</b-form-group>
|
||||
</fieldset>
|
||||
|
||||
<!-- General report editing component -->
|
||||
<component
|
||||
:is="reportEditor"
|
||||
v-if="editReport"
|
||||
:report.sync="editReport"
|
||||
:chart="chart"
|
||||
:modules="modules"
|
||||
:dimension-field-kind="['Select']"
|
||||
:supported-metrics="1"
|
||||
/>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
md="5"
|
||||
sm="12"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column position-sticky"
|
||||
style="top: 0;"
|
||||
>
|
||||
<div
|
||||
class="chart-preview mt-2"
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
class="mt-2 mt-md-0"
|
||||
>
|
||||
<div
|
||||
class="d-flex justify-content-end pr-3">
|
||||
<b-button
|
||||
:title="$t('edit.loadData')"
|
||||
variant="outline"
|
||||
size="lg"
|
||||
class="d-flex align-items-center text-primary"
|
||||
@click.prevent="update"
|
||||
>
|
||||
<font-awesome-icon :icon="['fa', 'sync']" />
|
||||
</b-button>
|
||||
</div>
|
||||
<b-form-group
|
||||
:label="$t('edit.animation.label')"
|
||||
class="text-primary"
|
||||
>
|
||||
<c-input-checkbox
|
||||
v-model="chart.config.noAnimation"
|
||||
:labels="checkboxLabel"
|
||||
switch
|
||||
invert
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
<hr v-if="modules">
|
||||
|
||||
<chart-component
|
||||
ref="chart"
|
||||
:chart="chart"
|
||||
:reporter="reporter"
|
||||
style="min-height: 400px;"
|
||||
@updated="onUpdated"
|
||||
/>
|
||||
<!-- Some charts support multiple reports -->
|
||||
<!-- <fieldset
|
||||
v-if="supportsMultipleReports"
|
||||
class="form-group"
|
||||
>
|
||||
<b-form-group class=" px-3">
|
||||
<h5 class="d-inline-block">
|
||||
{{ $t('configure.reportsLabel') }}
|
||||
</h5>
|
||||
|
||||
<b-btn
|
||||
v-if="reportsValid"
|
||||
class="float-right p-0"
|
||||
variant="link"
|
||||
@click="onAddReport"
|
||||
>
|
||||
+ {{ $t('general.label.add') }}
|
||||
</b-btn>
|
||||
|
||||
<div>
|
||||
<draggable
|
||||
v-model="reports"
|
||||
handle=".handle"
|
||||
tag="tbody"
|
||||
class="w-100 d-inline-block"
|
||||
>
|
||||
<report-item
|
||||
v-for="(r, i) in reports"
|
||||
:key="i"
|
||||
:report="r"
|
||||
:fixed="reports.length === 1"
|
||||
@edit="onEditReport(i)"
|
||||
@remove="onRemoveReport(i)"
|
||||
>
|
||||
<template #report-label>
|
||||
<template v-if="r.moduleID">
|
||||
{{ moduleName(r.moduleID) }}
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
{{ $t('edit.unconfiguredReport') }}
|
||||
</template>
|
||||
</template>
|
||||
</report-item>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</b-form-group>
|
||||
</fieldset> -->
|
||||
|
||||
<!-- General report editing component -->
|
||||
<component
|
||||
:is="reportEditor"
|
||||
v-if="editReport"
|
||||
:report.sync="editReport"
|
||||
:chart="chart"
|
||||
:modules="modules"
|
||||
:dimension-field-kind="['Select']"
|
||||
:supported-metrics="1"
|
||||
/>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
md="5"
|
||||
sm="12"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column position-sticky"
|
||||
style="top: 0;"
|
||||
>
|
||||
<b-button
|
||||
:title="$t('edit.loadData')"
|
||||
:disabled="processing || !reportsValid"
|
||||
variant="outline-light"
|
||||
size="lg"
|
||||
class="d-flex align-items-center text-primary ml-auto border-0 mt-2 mr-2"
|
||||
@click.prevent="update"
|
||||
>
|
||||
<font-awesome-icon :icon="['fa', 'sync']" />
|
||||
</b-button>
|
||||
|
||||
<chart-component
|
||||
ref="chart"
|
||||
:chart="chart"
|
||||
:reporter="reporter"
|
||||
style="min-height: 400px;"
|
||||
@updated="onUpdated"
|
||||
/>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
@@ -607,8 +598,8 @@ export default {
|
||||
}
|
||||
|
||||
.color-box {
|
||||
width: 28px;
|
||||
height: 12px;
|
||||
width: 18px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.color-selector {
|
||||
|
||||
@@ -14,12 +14,13 @@ general:
|
||||
invalid-handle-characters: Should be at least 2 characters long. Can contain only letters, numbers, dashes, underscores and dots. Must end with letter or number
|
||||
edit:
|
||||
animation:
|
||||
label: Animation
|
||||
enabled: Animation enabled
|
||||
dimension:
|
||||
calculateLabelCount: Calculate how many labels can be shown
|
||||
defaultValueFootnote: Use this value for missing dimension values
|
||||
defaultValueLabel: Default value
|
||||
fieldLabel: Field
|
||||
fieldLabel: Field *
|
||||
fieldPlaceholder: Select a dimension field
|
||||
function:
|
||||
date: DATE
|
||||
@@ -33,6 +34,8 @@ edit:
|
||||
gaugeSteps: Steps
|
||||
label: Dimensions
|
||||
skipMissingValues: Skip missing values
|
||||
options:
|
||||
label: Options
|
||||
optionsPicker:
|
||||
searchPlaceholder: Type here to search among select options
|
||||
availableItems: Available options
|
||||
@@ -45,10 +48,11 @@ edit:
|
||||
description: Labels can be rotated from -90 to 90 degrees.
|
||||
filter:
|
||||
customize: Customize filter
|
||||
label: Filters
|
||||
label: Filter
|
||||
preset: Preset filters
|
||||
footnote: Simplified SQL condition (WHERE ...) syntax is supported. Variables like {{0}}, {{1}} and {{2}} are evaluated (when available)
|
||||
placeholder: field1 = 1 AND field2 = 232
|
||||
noFilter: Select a predefined filter or make a custom one
|
||||
noFilter: Select a filter or make a custom one
|
||||
recordsCreatedLastMonth: Records created last month
|
||||
recordsCreatedLastQuarter: Records created last quarter
|
||||
recordsCreatedLastYear: Records created last year
|
||||
@@ -58,10 +62,12 @@ edit:
|
||||
loadData: Load data
|
||||
metric:
|
||||
add: Add metric
|
||||
fieldLabel: Field
|
||||
fieldLabel: Field *
|
||||
fieldPlaceholder: Select metric field
|
||||
fillArea: Fill area below the line
|
||||
fixTooltips: Always show tooltips
|
||||
options:
|
||||
label: Options
|
||||
function:
|
||||
avg: AVG
|
||||
label: Function
|
||||
@@ -94,7 +100,7 @@ edit:
|
||||
output:
|
||||
bar: Bar
|
||||
doughnut: Doughnut
|
||||
label: Output
|
||||
label: Chart type *
|
||||
line: Line
|
||||
pie: Pie
|
||||
placeholder: Select metric output
|
||||
@@ -103,7 +109,7 @@ edit:
|
||||
cumulative: Cumulative
|
||||
title: Metrics
|
||||
module:
|
||||
label: Module
|
||||
label: Module *
|
||||
placeholder: Pick a module
|
||||
title: Data Source
|
||||
title: Chart builder
|
||||
@@ -131,7 +137,7 @@ edit:
|
||||
additionalConfig:
|
||||
legend:
|
||||
label: Legend
|
||||
hide: Hide legend
|
||||
show: Show legend
|
||||
orientation:
|
||||
label: Orientation
|
||||
horizontal: Horizontal
|
||||
@@ -149,9 +155,11 @@ edit:
|
||||
bottom: Bottom
|
||||
left: Left
|
||||
valueRange: Values can be set as pixels 20 or as percentages 20%
|
||||
options:
|
||||
label: Options
|
||||
tooltip:
|
||||
label: Tooltip
|
||||
labelNextToChartPartition: Show labels next to chart partition
|
||||
labelNextToChart: Show labels next to chart
|
||||
formatting:
|
||||
label: Formatting
|
||||
description: '{a} - metrics label, {b} - dimension value, {c} - metric value, {d} - metric value percentage'
|
||||
|
||||
Reference in New Issue
Block a user