Update chart builder layout
This commit is contained in:
Emmy Leke
Jože Fortun
@@ -20,33 +20,60 @@
|
||||
noItemsFound: $t('edit.dimension.optionsPicker.noItemsFound'),
|
||||
}"
|
||||
class="d-flex flex-column"
|
||||
style="max-height: 45vh;"
|
||||
style="height: 100% !important;"
|
||||
@update:value="setOptions(index, field, $event)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #metric-options="{ metric }">
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
breakpoint="md"
|
||||
<b-row
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-checkbox
|
||||
v-model="metric.cumulative"
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
{{ $t('edit.metric.cumulative') }}
|
||||
</b-form-checkbox>
|
||||
<b-form-checkbox
|
||||
v-model="metric.relativeValue"
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.cumulative')"
|
||||
>
|
||||
<c-input-checkbox
|
||||
v-model="metric.cumulative"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
{{ $t('edit.metric.relative') }}
|
||||
</b-form-checkbox>
|
||||
<b-form-checkbox
|
||||
v-model="metric.fixTooltips"
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.relative')"
|
||||
>
|
||||
<c-input-checkbox
|
||||
v-model="metric.relativeValue"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
{{ $t('edit.metric.fixTooltips') }}
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.fixTooltips')"
|
||||
>
|
||||
<c-input-checkbox
|
||||
v-model="metric.fixTooltips"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
</report-edit>
|
||||
</template>
|
||||
@@ -58,6 +85,8 @@ import { components } from '@cortezaproject/corteza-vue'
|
||||
const { CItemPicker } = components
|
||||
|
||||
export default {
|
||||
name: 'FunnelChart',
|
||||
|
||||
components: {
|
||||
ReportEdit,
|
||||
CItemPicker,
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<template #dimension-options="{ dimension }">
|
||||
<b-form-group
|
||||
:label="$t('edit.dimension.gaugeSteps')"
|
||||
:label-cols="3"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-input-group
|
||||
v-for="(step, i) in dimension.meta.steps"
|
||||
@@ -61,23 +61,39 @@
|
||||
</template>
|
||||
|
||||
<template #metric-options="{ metric }">
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.fx.label')"
|
||||
:description="$t('edit.metric.fx.description')"
|
||||
<b-row
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-textarea
|
||||
v-model="metric.fx"
|
||||
placeholder="n"
|
||||
/>
|
||||
</b-form-group>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.fx.label')"
|
||||
:description="$t('edit.metric.fx.description')"
|
||||
>
|
||||
<b-form-textarea
|
||||
v-model="metric.fx"
|
||||
placeholder="n"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-form-checkbox
|
||||
v-model="metric.fixTooltips"
|
||||
:value="true"
|
||||
:unchecked-value="false"
|
||||
>
|
||||
{{ $t('edit.metric.fixTooltips') }}
|
||||
</b-form-checkbox>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.fixTooltips')"
|
||||
>
|
||||
<c-input-checkbox
|
||||
v-model="metric.fixTooltips"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
</report-edit>
|
||||
</template>
|
||||
@@ -89,6 +105,8 @@ import { compose, NoID } from '@cortezaproject/corteza-js'
|
||||
import base from './base'
|
||||
|
||||
export default {
|
||||
name: 'GaugeChart',
|
||||
|
||||
i18nOptions: {
|
||||
namespaces: 'chart',
|
||||
},
|
||||
|
||||
@@ -4,404 +4,515 @@
|
||||
:modules="modules"
|
||||
>
|
||||
<template #y-axis="{ report }">
|
||||
<h4 class="mb-0">
|
||||
{{ $t('edit.yAxis.label') }}
|
||||
</h4>
|
||||
<div
|
||||
class="px-3"
|
||||
>
|
||||
<h5 class="mb-3">
|
||||
{{ $t('edit.yAxis.label') }}
|
||||
</h5>
|
||||
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
class="mt-2"
|
||||
breakpoint="md"
|
||||
:label="$t('edit.yAxis.labelLabel')"
|
||||
>
|
||||
<b-input-group>
|
||||
<b-form-input
|
||||
v-model="report.yAxis.label"
|
||||
/>
|
||||
<b-input-group-append>
|
||||
<chart-translator
|
||||
:field.sync="report.yAxis.label"
|
||||
:chart="chart"
|
||||
:disabled="isNew"
|
||||
highlight-key="yAxis.label"
|
||||
button-variant="light"
|
||||
/>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
class="mt-2"
|
||||
breakpoint="md"
|
||||
:label="$t('edit.yAxis.labelPosition.label')"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="report.yAxis.labelPosition"
|
||||
:options="axisLabelPositions"
|
||||
/>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
class="mt-1"
|
||||
breakpoint="md"
|
||||
:label="$t('edit.yAxis.minLabel')"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="report.yAxis.min"
|
||||
type="number"
|
||||
:placeholder="$t('edit.yAxis.minPlaceholder')"
|
||||
/>
|
||||
</b-form-group>
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
class="mt-1"
|
||||
breakpoint="md"
|
||||
:label="$t('edit.yAxis.maxLabel')"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="report.yAxis.max"
|
||||
type="number"
|
||||
:placeholder="$t('edit.yAxis.maxPlaceholder')"
|
||||
/>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
horizontal
|
||||
breakpoint="md"
|
||||
:label-cols="3"
|
||||
:label="$t('edit.yAxis.rotate.label')"
|
||||
:description="$t('edit.yAxis.rotate.description')"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.yAxis.rotateLabel"
|
||||
type="number"
|
||||
/>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
breakpoint="md"
|
||||
>
|
||||
<b-form-checkbox
|
||||
v-model="report.yAxis.axisType"
|
||||
value="logarithmic"
|
||||
unchecked-value="linear"
|
||||
<b-row
|
||||
class="text-primary"
|
||||
>
|
||||
{{ $t('edit.yAxis.logarithmicScale') }}
|
||||
</b-form-checkbox>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.yAxis.labelLabel')"
|
||||
>
|
||||
<b-input-group>
|
||||
<b-form-input
|
||||
v-model="report.yAxis.label"
|
||||
/>
|
||||
<b-input-group-append>
|
||||
<chart-translator
|
||||
:field.sync="report.yAxis.label"
|
||||
:chart="chart"
|
||||
:disabled="isNew"
|
||||
highlight-key="yAxis.label"
|
||||
button-variant="light"
|
||||
/>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-form-checkbox
|
||||
v-model="report.yAxis.axisPosition"
|
||||
value="right"
|
||||
unchecked-value="left"
|
||||
>
|
||||
{{ $t('edit.yAxis.axisOnRight') }}
|
||||
</b-form-checkbox>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.yAxis.labelPosition.label')"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="report.yAxis.labelPosition"
|
||||
:options="axisLabelPositions"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-form-checkbox
|
||||
v-model="report.yAxis.beginAtZero"
|
||||
>
|
||||
{{ $t('edit.yAxis.axisScaleFromZero') }}
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.yAxis.minLabel')"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="report.yAxis.min"
|
||||
type="number"
|
||||
:placeholder="$t('edit.yAxis.minPlaceholder')"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.yAxis.maxLabel')"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="report.yAxis.max"
|
||||
type="number"
|
||||
:placeholder="$t('edit.yAxis.maxPlaceholder')"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.yAxis.rotate.label')"
|
||||
:description="$t('edit.yAxis.rotate.description')"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.yAxis.rotateLabel"
|
||||
type="number"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.yAxis.options.label')"
|
||||
>
|
||||
<b-form-checkbox
|
||||
v-model="report.yAxis.axisType"
|
||||
value="logarithmic"
|
||||
unchecked-value="linear"
|
||||
>
|
||||
{{ $t('edit.yAxis.logarithmicScale') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-form-checkbox
|
||||
v-model="report.yAxis.axisPosition"
|
||||
value="right"
|
||||
unchecked-value="left"
|
||||
>
|
||||
{{ $t('edit.yAxis.axisOnRight') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-form-checkbox
|
||||
v-model="report.yAxis.beginAtZero"
|
||||
>
|
||||
{{ $t('edit.yAxis.axisScaleFromZero') }}
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #metric-options="{ metric }">
|
||||
<b-form-group
|
||||
v-if="!['pie', 'doughnut'].includes(metric.type)"
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
class="mt-1"
|
||||
breakpoint="md"
|
||||
:label="$t('edit.metric.labelLabel')"
|
||||
>
|
||||
<b-input-group>
|
||||
<b-form-input
|
||||
v-model="metric.label"
|
||||
/>
|
||||
<b-input-group-append>
|
||||
<chart-translator
|
||||
:field.sync="metric.label"
|
||||
:chart="chart"
|
||||
:disabled="isNew"
|
||||
:highlight-key="`metrics.${metric.metricID}.label`"
|
||||
button-variant="light"
|
||||
/>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
breakpoint="md"
|
||||
:label="$t('edit.metric.fx.label')"
|
||||
:description="$t('edit.metric.fx.description')"
|
||||
>
|
||||
<b-form-textarea
|
||||
v-model="metric.fx"
|
||||
placeholder="n"
|
||||
/>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
breakpoint="md"
|
||||
:label="$t('edit.metric.output.label')"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="metric.type"
|
||||
:options="chartTypes"
|
||||
<b-row>
|
||||
<b-col
|
||||
v-if="!['pie', 'doughnut'].includes(metric.type)"
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<template slot="first">
|
||||
<option
|
||||
:value="undefined"
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.labelLabel')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-input-group>
|
||||
<b-form-input
|
||||
v-model="metric.label"
|
||||
/>
|
||||
<b-input-group-append>
|
||||
<chart-translator
|
||||
:field.sync="metric.label"
|
||||
:chart="chart"
|
||||
:disabled="isNew"
|
||||
:highlight-key="`metrics.${metric.metricID}.label`"
|
||||
button-variant="light"
|
||||
/>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.output.label')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="metric.type"
|
||||
:options="chartTypes"
|
||||
>
|
||||
{{ $t('edit.metric.output.placeholder') }}
|
||||
</option>
|
||||
</template>
|
||||
</b-form-select>
|
||||
</b-form-group>
|
||||
<template slot="first">
|
||||
<option
|
||||
:value="undefined"
|
||||
>
|
||||
{{ $t('edit.metric.output.placeholder') }}
|
||||
</option>
|
||||
</template>
|
||||
</b-form-select>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
breakpoint="md"
|
||||
label=""
|
||||
>
|
||||
<template v-if="hasRelativeDisplay(metric)">
|
||||
<b-form-checkbox
|
||||
v-model="metric.relativeValue"
|
||||
>
|
||||
{{ $t('edit.metric.relative') }}
|
||||
</b-form-checkbox>
|
||||
</template>
|
||||
|
||||
<template v-if="metric.type === 'line'">
|
||||
<b-form-checkbox
|
||||
v-model="metric.fill"
|
||||
>
|
||||
{{ $t('edit.metric.fillArea') }}
|
||||
</b-form-checkbox>
|
||||
</template>
|
||||
<b-form-checkbox
|
||||
v-model="metric.fixTooltips"
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
{{ $t('edit.metric.fixTooltips') }}
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.fx.label')"
|
||||
:description="$t('edit.metric.fx.description')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-textarea
|
||||
v-model="metric.fx"
|
||||
placeholder="n"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
v-if="true"
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.relative')"
|
||||
class="text-primary"
|
||||
>
|
||||
<c-input-checkbox
|
||||
:value="!!metric.relativeValue"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
@change="$set(metric,'relativeValue', $event)"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<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
|
||||
v-model="metric.fill"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.fixTooltips')"
|
||||
class="text-primary"
|
||||
>
|
||||
<c-input-checkbox
|
||||
v-model="metric.fixTooltips"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
|
||||
<template #additional-config="{ hasAxis, report }">
|
||||
<hr>
|
||||
<template>
|
||||
<h4 class="mb-3">
|
||||
<hr v-if="!hasAxis">
|
||||
<div
|
||||
class="px-3"
|
||||
>
|
||||
<h5 class="mb-3">
|
||||
{{ $t('edit.additionalConfig.legend.label') }}
|
||||
</h4>
|
||||
</h5>
|
||||
|
||||
<b-form-group
|
||||
horizontal
|
||||
breakpoint="md"
|
||||
>
|
||||
<b-form-checkbox
|
||||
v-model="report.legend.isHidden"
|
||||
<b-row>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
{{ $t('edit.additionalConfig.legend.hide') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<template v-if="!report.legend.isHidden">
|
||||
<b-form-group
|
||||
horizontal
|
||||
class="mt-2"
|
||||
breakpoint="md"
|
||||
:label-cols="3"
|
||||
:label="$t('edit.additionalConfig.legend.orientation.label')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="report.legend.orientation"
|
||||
:options="orientations"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.legend.hide')"
|
||||
class="text-primary"
|
||||
>
|
||||
<c-input-checkbox
|
||||
:value="!!report.legend.isHidden"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
@input="$set(report.legend,'isHidden', $event)"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
horizontal
|
||||
breakpoint="md"
|
||||
:label-cols="3"
|
||||
:label="$t('edit.additionalConfig.legend.align.label')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="report.legend.align"
|
||||
:options="alignments"
|
||||
:disabled="!report.legend.position.isDefault"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="'Options'"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-checkbox
|
||||
v-model="report.legend.isScrollable"
|
||||
class="mt-2"
|
||||
:disabled="report.legend.orientation !== 'horizontal'"
|
||||
>
|
||||
{{ $t('edit.additionalConfig.legend.scrollable') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-form-checkbox
|
||||
v-model="report.legend.position.isDefault"
|
||||
class="mt-2"
|
||||
>
|
||||
{{ $t('edit.additionalConfig.legend.position.customize') }}
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
<template
|
||||
v-if="!report.legend.position.isDefault"
|
||||
</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
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
breakpoint="md"
|
||||
:label="$t('edit.additionalConfig.legend.position.top')"
|
||||
class="mt-1"
|
||||
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
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
:label="$t('edit.additionalConfig.legend.position.right')"
|
||||
breakpoint="md"
|
||||
class="mt-1"
|
||||
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
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
:label="$t('edit.additionalConfig.legend.position.bottom')"
|
||||
breakpoint="md"
|
||||
class="mt-1"
|
||||
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
|
||||
horizontal
|
||||
breakpoint="md"
|
||||
class="mt-1"
|
||||
:label-cols="3"
|
||||
:label="$t('edit.additionalConfig.legend.position.left')"
|
||||
:description="$t('edit.additionalConfig.legend.valueRange')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.legend.position.left"
|
||||
/>
|
||||
</b-form-group>
|
||||
</template>
|
||||
</template>
|
||||
</b-form-group>
|
||||
</template>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-row>
|
||||
</div>
|
||||
|
||||
<template v-if="!hasAxis">
|
||||
<hr>
|
||||
<h4 class="mb-3">
|
||||
{{ $t('edit.additionalConfig.tooltip.label') }}
|
||||
</h4>
|
||||
<div class="px-3 text-primary">
|
||||
<h5 class="mb-3">
|
||||
{{ $t('edit.additionalConfig.tooltip.label') }}
|
||||
</h5>
|
||||
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
breakpoint="md"
|
||||
:label="$t('edit.additionalConfig.tooltip.formatting.label')"
|
||||
:description="$t('edit.additionalConfig.tooltip.formatting.description')"
|
||||
class="mt-1"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.tooltip.formatting"
|
||||
:placeholder="$t('edit.additionalConfig.tooltip.formatting.placeholder')"
|
||||
/>
|
||||
</b-form-group>
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
breakpoint="md"
|
||||
>
|
||||
<b-form-checkbox
|
||||
v-model="report.tooltip.labelsNextToPartition"
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.tooltip.formatting.label')"
|
||||
:description="$t('edit.additionalConfig.tooltip.formatting.description')"
|
||||
>
|
||||
{{ $t('edit.additionalConfig.tooltip.labelNextToChartPartition') }}
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
<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>
|
||||
<template>
|
||||
<h4 class="mb-3">
|
||||
<div class="px-3">
|
||||
<h5 class="mb-3">
|
||||
{{ $t('edit.additionalConfig.offset.label') }}
|
||||
</h4>
|
||||
<b-form-checkbox
|
||||
v-model="report.offset.isDefault"
|
||||
class="mb-3"
|
||||
</h5>
|
||||
|
||||
<b-row
|
||||
class="text-primary"
|
||||
>
|
||||
{{ $t('edit.additionalConfig.offset.default') }}
|
||||
</b-form-checkbox>
|
||||
<b-form-group
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.offset.default')"
|
||||
>
|
||||
<c-input-checkbox
|
||||
v-model="report.offset.isDefault"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
class="mb-3"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row
|
||||
v-if="!report.offset.isDefault"
|
||||
horizontal
|
||||
breakpoint="md"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
breakpoint="md"
|
||||
:label="$t('edit.additionalConfig.offset.position.top')"
|
||||
class="mt-1"
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.offset.top"
|
||||
/>
|
||||
</b-form-group>
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
:label="$t('edit.additionalConfig.offset.position.right')"
|
||||
breakpoint="md"
|
||||
class="mt-1"
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.offset.position.top')"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.offset.top"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.offset.right"
|
||||
/>
|
||||
</b-form-group>
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
:label="$t('edit.additionalConfig.offset.position.bottom')"
|
||||
breakpoint="md"
|
||||
class="mt-1"
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.offset.position.right')"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.offset.right"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.offset.bottom"
|
||||
/>
|
||||
</b-form-group>
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
:label="$t('edit.additionalConfig.offset.position.left')"
|
||||
breakpoint="md"
|
||||
:description="$t('edit.additionalConfig.offset.valueRange')"
|
||||
class="mt-1"
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.offset.position.bottom')"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.offset.bottom"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.offset.left"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-form-group>
|
||||
</template>
|
||||
<b-form-group
|
||||
:label="$t('edit.additionalConfig.offset.position.left')"
|
||||
:description="$t('edit.additionalConfig.offset.valueRange')"
|
||||
>
|
||||
<b-input
|
||||
v-model="report.offset.left"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
</report-edit>
|
||||
</template>
|
||||
@@ -418,6 +529,8 @@ const ignoredCharts = [
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'GenericChart',
|
||||
|
||||
i18nOptions: {
|
||||
namespaces: 'chart',
|
||||
},
|
||||
|
||||
@@ -1,158 +1,209 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Configure source module -->
|
||||
<b-form-group
|
||||
:label="$t('edit.module.label')"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="moduleID"
|
||||
:options="modules"
|
||||
text-field="name"
|
||||
class="mt-1"
|
||||
value-field="moduleID"
|
||||
>
|
||||
<template slot="first">
|
||||
<option
|
||||
:value="undefined"
|
||||
>
|
||||
{{ $t('edit.module.placeholder') }}
|
||||
</option>
|
||||
</template>
|
||||
</b-form-select>
|
||||
</b-form-group>
|
||||
|
||||
<!-- Configure report filters -->
|
||||
<div
|
||||
v-if="!!module"
|
||||
class="mt-1"
|
||||
class="px-3"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.filter.label')"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="report.filter"
|
||||
:options="predefinedFilters"
|
||||
class="mb-2"
|
||||
<h5 class="mb-3">
|
||||
{{ $t('edit.module.title') }}
|
||||
</h5>
|
||||
|
||||
<b-row>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
class="text-primary"
|
||||
>
|
||||
<template slot="first">
|
||||
<b-form-select-option :value="defaultFilterOption">
|
||||
{{ $t('edit.filter.noFilter') }}
|
||||
</b-form-select-option>
|
||||
</template>
|
||||
</b-form-select>
|
||||
|
||||
<b-form-textarea
|
||||
v-model="report.filter"
|
||||
:placeholder="$t('edit.filter.placeholder')"
|
||||
/>
|
||||
|
||||
<b-form-text>
|
||||
<i18next
|
||||
path="edit.filter.footnote"
|
||||
tag="label"
|
||||
<b-form-group
|
||||
:label="$t('edit.module.label')"
|
||||
>
|
||||
<code>${recordID}</code>
|
||||
<code>${ownerID}</code>
|
||||
<code>${userID}</code>
|
||||
</i18next>
|
||||
</b-form-text>
|
||||
</b-form-group>
|
||||
<b-form-select
|
||||
v-model="moduleID"
|
||||
:options="modules"
|
||||
text-field="name"
|
||||
value-field="moduleID"
|
||||
>
|
||||
<template slot="first">
|
||||
<option
|
||||
:value="undefined"
|
||||
>
|
||||
{{ $t('edit.module.placeholder') }}
|
||||
</option>
|
||||
</template>
|
||||
</b-form-select>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
v-if="!!module"
|
||||
cols="12"
|
||||
md="6"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.filter.label')"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="report.filter"
|
||||
:options="predefinedFilters"
|
||||
>
|
||||
<template slot="first">
|
||||
<b-form-select-option :value="defaultFilterOption">
|
||||
{{ $t('edit.filter.noFilter') }}
|
||||
</b-form-select-option>
|
||||
</template>
|
||||
</b-form-select>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<!-- Configure report filters -->
|
||||
<b-col
|
||||
v-if="!!module"
|
||||
class="mt-1 text-primary"
|
||||
cols="12"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.filter.label')"
|
||||
>
|
||||
<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>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
<hr v-if="module">
|
||||
|
||||
<!-- Configure report dimensions -->
|
||||
<div v-if="!!module">
|
||||
<hr>
|
||||
|
||||
<div
|
||||
v-if="!!module"
|
||||
class="px-3"
|
||||
>
|
||||
<fieldset
|
||||
v-for="(d, i) in dimensions"
|
||||
:key="i"
|
||||
>
|
||||
<h4 class="mb-3">
|
||||
<h5 class="mb-3">
|
||||
{{ $t('edit.dimension.label') }}
|
||||
</h4>
|
||||
</h5>
|
||||
|
||||
<template v-if="usesDimensionsField">
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
breakpoint="md"
|
||||
:label="$t('edit.dimension.fieldLabel')"
|
||||
<b-row
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="d.field"
|
||||
:options="dimensionFields"
|
||||
@change="onDimFieldChange($event, d)"
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<template slot="first">
|
||||
<option
|
||||
:value="undefined"
|
||||
<b-form-group
|
||||
:label="$t('edit.dimension.fieldLabel')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="d.field"
|
||||
:options="dimensionFields"
|
||||
@change="onDimFieldChange($event, d)"
|
||||
>
|
||||
{{ $t('edit.dimension.fieldPlaceholder') }}
|
||||
</option>
|
||||
</template>
|
||||
</b-form-select>
|
||||
</b-form-group>
|
||||
<template slot="first">
|
||||
<option
|
||||
:value="undefined"
|
||||
>
|
||||
{{ $t('edit.dimension.fieldPlaceholder') }}
|
||||
</option>
|
||||
</template>
|
||||
</b-form-select>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
breakpoint="md"
|
||||
:label="$t('edit.dimension.function.label')"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="d.modifier"
|
||||
:disabled="!d.field || !isTemporalField(d.field)"
|
||||
:options="dimensionModifiers"
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<template slot="first">
|
||||
<option
|
||||
:value="undefined"
|
||||
<b-form-group
|
||||
:label="$t('edit.dimension.function.label')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="d.modifier"
|
||||
:disabled="!d.field || !isTemporalField(d.field)"
|
||||
:options="dimensionModifiers"
|
||||
>
|
||||
{{ $t('edit.dimension.function.placeholder') }}
|
||||
</option>
|
||||
</template>
|
||||
</b-form-select>
|
||||
</b-form-group>
|
||||
<template slot="first">
|
||||
<option
|
||||
:value="undefined"
|
||||
>
|
||||
{{ $t('edit.dimension.function.placeholder') }}
|
||||
</option>
|
||||
</template>
|
||||
</b-form-select>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<template v-if="!unSkippable">
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
breakpoint="md"
|
||||
>
|
||||
<b-form-checkbox
|
||||
v-model="d.skipMissing"
|
||||
<b-row>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
{{ $t('edit.dimension.skipMissingValues') }}
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
<b-form-group
|
||||
:label="$t('edit.dimension.rotate.label')"
|
||||
:description="$t('edit.dimension.rotate.description')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-input
|
||||
v-model="d.rotateLabel"
|
||||
type="number"
|
||||
number
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-form-group
|
||||
v-if="!d.skipMissing"
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
breakpoint="md"
|
||||
:label="$t('edit.dimension.defaultValueLabel')"
|
||||
:description="$t('edit.dimension.defaultValueFootnote')"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="d.default"
|
||||
:type="defaultValueInputType(d)"
|
||||
/>
|
||||
</b-form-group>
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
breakpoint="md"
|
||||
:label="$t('edit.dimension.rotate.label')"
|
||||
:description="$t('edit.dimension.rotate.description')"
|
||||
>
|
||||
<b-input
|
||||
v-model="d.rotateLabel"
|
||||
type="number"
|
||||
number
|
||||
/>
|
||||
</b-form-group>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.dimension.skipMissingValues')"
|
||||
class="text-primary"
|
||||
>
|
||||
<c-input-checkbox
|
||||
:value="!!d.skipMissing"
|
||||
switch
|
||||
:labels="checkboxLabel"
|
||||
@change="d.skipMissing = $event"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
v-if="!d.skipMissing"
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t('edit.dimension.defaultValueLabel')"
|
||||
:description="$t('edit.dimension.defaultValueFootnote')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="d.default"
|
||||
:type="defaultValueInputType(d)"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -163,10 +214,15 @@
|
||||
:field="getField(d)"
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
<hr v-if="!!module">
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 class="d-flex align-items-center mb-3">
|
||||
<!-- Configure report metrics -->
|
||||
<div
|
||||
v-if="!!module"
|
||||
class="px-3"
|
||||
>
|
||||
<h5 class="d-flex align-items-center mb-3">
|
||||
{{ $t('edit.metric.title') }}
|
||||
<b-button
|
||||
v-if="canAddMetric"
|
||||
@@ -176,9 +232,8 @@
|
||||
>
|
||||
+ {{ $t('edit.metric.add') }}
|
||||
</b-button>
|
||||
</h4>
|
||||
</h5>
|
||||
|
||||
<!-- Configure report metrics -->
|
||||
<draggable
|
||||
class="metrics mb-3"
|
||||
:list.sync="metrics"
|
||||
@@ -208,47 +263,55 @@
|
||||
</b-button>
|
||||
</h5>
|
||||
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
breakpoint="md"
|
||||
:label="$t('edit.metric.fieldLabel')"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="m.field"
|
||||
:options="metricFields"
|
||||
@change="onMetricFieldChange($event, m)"
|
||||
<b-row>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<template slot="first">
|
||||
<option
|
||||
:value="undefined"
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.fieldLabel')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="m.field"
|
||||
:options="metricFields"
|
||||
@change="onMetricFieldChange($event, m)"
|
||||
>
|
||||
{{ $t('edit.metric.fieldPlaceholder') }}
|
||||
</option>
|
||||
</template>
|
||||
</b-form-select>
|
||||
</b-form-group>
|
||||
<template slot="first">
|
||||
<option
|
||||
:value="undefined"
|
||||
>
|
||||
{{ $t('edit.metric.fieldPlaceholder') }}
|
||||
</option>
|
||||
</template>
|
||||
</b-form-select>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-form-group
|
||||
horizontal
|
||||
:label-cols="3"
|
||||
breakpoint="md"
|
||||
:label="$t('edit.metric.function.label')"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="m.aggregate"
|
||||
:disabled="!m.field || m.field === 'count'"
|
||||
:options="metricAggregates"
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<template slot="first">
|
||||
<option
|
||||
:value="undefined"
|
||||
<b-form-group
|
||||
:label="$t('edit.metric.function.label')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="m.aggregate"
|
||||
:disabled="!m.field || m.field === 'count'"
|
||||
:options="metricAggregates"
|
||||
>
|
||||
{{ $t('edit.metric.function.placeholder') }}
|
||||
</option>
|
||||
</template>
|
||||
</b-form-select>
|
||||
</b-form-group>
|
||||
<template slot="first">
|
||||
<option
|
||||
:value="undefined"
|
||||
>
|
||||
{{ $t('edit.metric.function.placeholder') }}
|
||||
</option>
|
||||
</template>
|
||||
</b-form-select>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<slot
|
||||
name="metric-options"
|
||||
@@ -257,15 +320,15 @@
|
||||
</fieldset>
|
||||
</draggable>
|
||||
</div>
|
||||
<hr v-if="!!module && hasAxis">
|
||||
|
||||
<template v-if="hasAxis">
|
||||
<hr>
|
||||
|
||||
<slot
|
||||
name="y-axis"
|
||||
:report="editReport"
|
||||
/>
|
||||
</template>
|
||||
<hr v-if="hasAxis">
|
||||
|
||||
<slot
|
||||
name="additional-config"
|
||||
|
||||
@@ -45,6 +45,15 @@ export default {
|
||||
},
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
checkboxLabel: {
|
||||
on: this.$t('general:label.yes'),
|
||||
off: this.$t('general:label.no'),
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
editReport: {
|
||||
get () {
|
||||
|
||||
@@ -724,7 +724,7 @@ import AutomationTab from './Shared/AutomationTab'
|
||||
import FieldPicker from 'corteza-webapp-compose/src/components/Common/FieldPicker'
|
||||
import RecordListFilter from 'corteza-webapp-compose/src/components/Common/RecordListFilter'
|
||||
import { components } from '@cortezaproject/corteza-vue'
|
||||
const { CInputPresort, CInputCheckbox } = components
|
||||
const { CInputPresort } = components
|
||||
|
||||
export default {
|
||||
i18nOptions: {
|
||||
@@ -737,7 +737,6 @@ export default {
|
||||
AutomationTab,
|
||||
FieldPicker,
|
||||
CInputPresort,
|
||||
CInputCheckbox,
|
||||
RecordListFilter,
|
||||
VueSelect,
|
||||
},
|
||||
|
||||
@@ -55,6 +55,7 @@ Vue.component('c-permissions-button', components.CPermissionsButton)
|
||||
Vue.component('c-input-confirm', components.CInputConfirm)
|
||||
Vue.component('c-input-processing', components.CInputProcessing)
|
||||
Vue.component('c-resource-list', components.CResourceList)
|
||||
Vue.component('c-input-checkbox', components.CInputCheckbox)
|
||||
|
||||
// Map things
|
||||
Vue.component('l-map', LMap)
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
fluid="xl"
|
||||
@submit.prevent="handleSave"
|
||||
>
|
||||
<b-row no-gutters>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-card
|
||||
no-body
|
||||
@@ -36,102 +36,135 @@
|
||||
</b-card-header>
|
||||
<b-container
|
||||
fluid
|
||||
class="px-4 py-3"
|
||||
class="p-0"
|
||||
>
|
||||
<b-row>
|
||||
<b-col
|
||||
md="6"
|
||||
md="7"
|
||||
sm="12"
|
||||
>
|
||||
<div v-if="modules">
|
||||
<b-form-group
|
||||
:label="$t('name')"
|
||||
<div
|
||||
class="pt-3 px-3"
|
||||
>
|
||||
<h5>
|
||||
{{ $t('generalSettings') }}
|
||||
</h5>
|
||||
<b-row
|
||||
v-if="modules"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="chart.name"
|
||||
:state="nameState"
|
||||
/>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
:label="$t('handle')"
|
||||
>
|
||||
<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-form-group
|
||||
:label="$t('colorScheme.label')"
|
||||
>
|
||||
<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')"
|
||||
:clearable="true"
|
||||
:calculate-position="calculateDropdownPosition"
|
||||
class="bg-white h-100 w-100"
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<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"
|
||||
<b-form-group
|
||||
:label="$t('name')"
|
||||
class="text-primary"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="chart.name"
|
||||
:state="nameState"
|
||||
/>
|
||||
</template>
|
||||
</vue-select>
|
||||
<template
|
||||
v-if="currentColorScheme"
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<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-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<div
|
||||
v-for="(color, index) in currentColorScheme.colors"
|
||||
:key="`${currentColorScheme.value}-${index}`"
|
||||
:style="`background: ${color};`"
|
||||
class="d-inline-block color-box mr-1"
|
||||
/>
|
||||
</template>
|
||||
</b-form-group>
|
||||
:label="$t('colorScheme.label')"
|
||||
>
|
||||
<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>
|
||||
|
||||
<b-form-group>
|
||||
<b-form-checkbox
|
||||
v-model="chart.config.noAnimation"
|
||||
:value="false"
|
||||
:unchecked-value="true"
|
||||
switch
|
||||
<template
|
||||
v-if="currentColorScheme"
|
||||
>
|
||||
<div
|
||||
v-for="(color, index) in currentColorScheme.colors"
|
||||
:key="`${currentColorScheme.value}-${index}`"
|
||||
:style="`background: ${color};`"
|
||||
class="d-inline-block color-box mr-1"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
class="mt-2 mt-md-0"
|
||||
>
|
||||
{{ $t('edit.animation.enabled') }}
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
|
||||
<hr>
|
||||
<b-form-group
|
||||
:label="$t('edit.animation.enabled')"
|
||||
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">
|
||||
|
||||
<!-- Some charts support multiple reports -->
|
||||
<fieldset
|
||||
v-if="supportsMultipleReports"
|
||||
class="form-group mt-2"
|
||||
class="form-group"
|
||||
>
|
||||
<b-form-group class="mb-2">
|
||||
<h4 class="d-inline-block">
|
||||
<b-form-group class=" px-3">
|
||||
<h5 class="d-inline-block">
|
||||
{{ $t('configure.reportsLabel') }}
|
||||
</h4>
|
||||
</h5>
|
||||
|
||||
<b-btn
|
||||
v-if="reportsValid"
|
||||
class="float-right p-0"
|
||||
@@ -140,7 +173,8 @@
|
||||
>
|
||||
+ {{ $t('general.label.add') }}
|
||||
</b-btn>
|
||||
<div class="ml-1">
|
||||
|
||||
<div>
|
||||
<draggable
|
||||
v-model="reports"
|
||||
handle=".handle"
|
||||
@@ -159,6 +193,7 @@
|
||||
<template v-if="r.moduleID">
|
||||
{{ moduleName(r.moduleID) }}
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
{{ $t('edit.unconfiguredReport') }}
|
||||
</template>
|
||||
@@ -169,7 +204,7 @@
|
||||
</b-form-group>
|
||||
</fieldset>
|
||||
|
||||
<!-- Generic report editing component -->
|
||||
<!-- General report editing component -->
|
||||
<component
|
||||
:is="reportEditor"
|
||||
v-if="editReport"
|
||||
@@ -182,24 +217,29 @@
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
md="6"
|
||||
md="5"
|
||||
sm="12"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column position-sticky"
|
||||
style="top: 0;"
|
||||
>
|
||||
<b-button
|
||||
:disabled="processing || !reportsValid"
|
||||
variant="outline-primary"
|
||||
@click.prevent="update"
|
||||
>
|
||||
{{ $t('edit.loadData') }}
|
||||
</b-button>
|
||||
|
||||
<div
|
||||
class="chart-preview mt-5"
|
||||
class="chart-preview mt-2"
|
||||
>
|
||||
<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>
|
||||
|
||||
<chart-component
|
||||
ref="chart"
|
||||
:chart="chart"
|
||||
@@ -238,7 +278,7 @@ import EditorToolbar from 'corteza-webapp-compose/src/components/Admin/EditorToo
|
||||
import { compose, NoID, shared } from '@cortezaproject/corteza-js'
|
||||
import Export from 'corteza-webapp-compose/src/components/Admin/Export'
|
||||
import ChartComponent from 'corteza-webapp-compose/src/components/Chart'
|
||||
import { handle } from '@cortezaproject/corteza-vue'
|
||||
import { handle, components } from '@cortezaproject/corteza-vue'
|
||||
import draggable from 'vuedraggable'
|
||||
import ReportItem from 'corteza-webapp-compose/src/components/Chart/ReportItem'
|
||||
import Reports from 'corteza-webapp-compose/src/components/Chart/Report'
|
||||
@@ -246,6 +286,7 @@ 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 { CInputCheckbox } = components
|
||||
const { colorschemes } = shared
|
||||
|
||||
const defaultReport = {
|
||||
@@ -266,6 +307,7 @@ export default {
|
||||
draggable,
|
||||
ReportItem,
|
||||
VueSelect,
|
||||
CInputCheckbox,
|
||||
},
|
||||
|
||||
props: {
|
||||
@@ -293,6 +335,10 @@ export default {
|
||||
processing: false,
|
||||
|
||||
editReportIndex: undefined,
|
||||
checkboxLabel: {
|
||||
on: this.$t('general:label.yes'),
|
||||
off: this.$t('general:label.no'),
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
@@ -554,13 +600,38 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
|
||||
.chart-preview {
|
||||
max-height: 50vh;
|
||||
max-height: 50%;
|
||||
}
|
||||
|
||||
.color-box {
|
||||
width: 28px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.color-selector {
|
||||
|
||||
.vs__dropdown-menu {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.vs__dropdown-option {
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.vs__selected-options {
|
||||
width: 0;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.vs__selected {
|
||||
max-width: 230px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -63,6 +63,6 @@ export default {
|
||||
'font-weight-bold': value,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -105,12 +105,15 @@ edit:
|
||||
module:
|
||||
label: Module
|
||||
placeholder: Pick a module
|
||||
title: Data Source
|
||||
title: Chart builder
|
||||
unconfiguredReport: Unconfigured report
|
||||
yAxis:
|
||||
axisOnRight: Place axis on the right side
|
||||
axisScaleFromZero: Always begin axis scale at zero
|
||||
label: Y-axis
|
||||
options:
|
||||
label: Options
|
||||
rotate:
|
||||
label: Rotate labels
|
||||
description: Labels can be rotated from -90 to 90 degrees
|
||||
@@ -166,6 +169,7 @@ import: 'Import chart(s):'
|
||||
newLabel: 'Create a new chart:'
|
||||
name: Chart name *
|
||||
handle: Handle
|
||||
generalSettings: General settings
|
||||
notification:
|
||||
loadFailed: Could not load chart
|
||||
saveFailed: Could not save this chart
|
||||
|
||||
Reference in New Issue
Block a user