Skip to content

Commit

Permalink
Add radar chart
Browse files Browse the repository at this point in the history
  • Loading branch information
@Fajfa
Fajfa committed Apr 18, 2023
1 parent df6eaac commit 68f5700
Show file tree
Hide file tree
Showing 17 changed files with 429 additions and 190 deletions.
179 changes: 2 additions & 177 deletions client/web/compose/src/components/Chart/Report/GenericChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,157 +311,6 @@
</template>

<template #additional-config="{ hasAxis, report }">
<hr v-if="!hasAxis">
<div
class="px-3"
>
<h5 class="mb-3">
{{ $t('edit.additionalConfig.legend.label') }}
</h5>

<b-row>
<b-col
cols="12"
md="6"
>
<b-form-group
:label="$t('edit.additionalConfig.legend.orientation.label')"
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.show')"
label-class="text-primary"
>
<c-input-checkbox
:value="!!report.legend.isHidden"
switch
invert
: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
:label="$t('edit.additionalConfig.legend.align.label')"
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="$t('edit.additionalConfig.legend.options.label')"
label-class="text-primary"
>
<b-form-checkbox
v-model="report.legend.isScrollable"
:disabled="report.legend.orientation !== 'horizontal'"
>
{{ $t('edit.additionalConfig.legend.scrollable') }}
</b-form-checkbox>

<b-form-checkbox
v-model="report.legend.position.isDefault"
>
{{ $t('edit.additionalConfig.legend.position.customize') }}
</b-form-checkbox>
</b-form-group>
</b-col>
</b-row>

<b-row
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">
Expand Down Expand Up @@ -603,13 +452,13 @@
<script>
import ReportEdit from './ReportEdit'
import ChartTranslator from 'corteza-webapp-compose/src/components/Chart/ChartTranslator'
import { compose, NoID } from '@cortezaproject/corteza-js'
import { compose } from '@cortezaproject/corteza-js'
import base from './base'
const ignoredCharts = [
'funnel',
'gauge',
'heatmap',
'radar',
]
export default {
Expand All @@ -626,13 +475,6 @@ export default {
extends: base,
props: {
chart: {
type: compose.Chart,
required: true,
},
},
data () {
return {
chartTypes: Object.values(compose.chartUtil.ChartType)
Expand All @@ -659,17 +501,6 @@ export default {
{ text: this.$t('edit.metric.lineTension.curvy'), value: 0.6 },
],
orientations: [
{ value: 'horizontal', text: this.$t('edit.additionalConfig.legend.orientation.horizontal') },
{ value: 'vertical', text: this.$t('edit.additionalConfig.legend.orientation.vertical') },
],
alignments: [
{ value: 'left', text: this.$t('edit.additionalConfig.legend.align.left') },
{ value: 'center', text: this.$t('edit.additionalConfig.legend.align.center') },
{ value: 'right', text: this.$t('edit.additionalConfig.legend.align.right') },
],
lineStyleOptions: [
{ value: '', text: this.$t('edit.metric.lineStyle.default') },
{ value: 'smooth', text: this.$t('edit.metric.lineStyle.smooth') },
Expand All @@ -688,12 +519,6 @@ export default {
}
},
computed: {
isNew () {
return this.chart.chartID === NoID
},
},
methods: {
hasRelativeDisplay: compose.chartUtil.hasRelativeDisplay,
Expand Down
94 changes: 94 additions & 0 deletions client/web/compose/src/components/Chart/Report/RadarChart.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<template>
<report-edit
:report.sync="editReport"
:modules="modules"
>
<template #metric-options="{ metric }">
<b-row>
<b-col
cols="12"
md="6"
>
<b-form-group
:label="$t('edit.metric.labelLabel')"
label-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-row>
</template>

<template #dimension-options-options="{ dimension }">
<b-form-checkbox
v-model="dimension.fixTooltips"
>
{{ $t('edit.metric.fixTooltips') }}
</b-form-checkbox>
</template>

<template #dimension-options="{ dimension }">
<b-row>
<b-col
cols="12"
md="6"
>
<b-form-group
:label="$t('edit.metric.radar.shape.label')"
label-class="text-primary"
>
<b-form-select
v-model="dimension.shape"
:options="shapeOptions"
/>
</b-form-group>
</b-col>
</b-row>
</template>
</report-edit>
</template>

<script>
import base from './base'
import ReportEdit from './ReportEdit'
import ChartTranslator from 'corteza-webapp-compose/src/components/Chart/ChartTranslator'
export default {
name: 'RadarChart',
components: {
ReportEdit,
ChartTranslator,
},
extends: base,
data () {
return {
shapeOptions: [
{ value: 'polygon', text: this.$t('edit.metric.radar.shape.polygon') },
{ value: 'circle', text: this.$t('edit.metric.radar.shape.circle') },
],
}
},
}
</script>

<style scoped lang="scss">
.cursor-pointer {
cursor: pointer;
}
</style>
Loading

0 comments on commit 68f5700

Please sign in to comment.