@simple-reporting/base 0.0.1

package/dev/src/components/SrlPage/KFCApplication/KFCDropdownCharts.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { ref } from 'vue'
+import SvgDropdown from './theme/SvgDropdown.vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  charts: Array,
+  activeSeries: Array,
+  activeChart: String,
+  updateSeries: Function,
+  changeChart: Function
+})
+
+const open = ref(false)
+const { locale } = useI18n()
+
+function toggleSeries(seriesIndex) {
+  if (props.activeSeries.includes(seriesIndex)) {
+    props.updateSeries(props.activeSeries.filter((ac) => ac !== null && ac != seriesIndex))
+  } else {
+    props.updateSeries(
+      [...props.activeSeries, seriesIndex].sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))
+    )
+  }
+}
+
+function selectChart(chart) {
+  if (chart.id !== props.activeChart) props.changeChart(chart)
+}
+
+function toggleState() {
+  open.value = !open.value
+}
+
+function closeDropdown() {
+  open.value = false
+}
+
+function getLabel(series) {
+  return series[locale.value]
+}
+</script>
+
+<template>
+  <div
+    class="iz-kfc-dropdown iz-kfc-dropdown--charts"
+    :class="{ open: open }"
+    @blur="closeDropdown()"
+    tabindex="-1"
+  >
+    <div class="iz-kfc-dropdown__title srl-typo-headline3" @click="toggleState()">
+      <span>{{ $t('kfc-dropdown.chart.title') }}</span>
+      <SvgDropdown></SvgDropdown>
+    </div>
+    <div class="iz-kfc-dropdown__list" id="dropdown-content-charts" v-if="open">
+      <div
+        class="iz-kfc-dropdown__item iz-kfc-dropdown__item--charts"
+        v-for="(chart, chartIndex) in charts"
+        v-bind:key="chartIndex"
+      >
+        <div
+          class="iz-kfc-dropdown__item-chart iz-kfc-dropdown__item-chart--charts"
+          :class="{ active: activeChart == chart.id }"
+        >
+          <span @click="selectChart(chart)">{{ getLabel(chart.title) }}</span>
+        </div>
+        <template v-if="activeChart == chart.id">
+          <div
+            class="iz-kfc-dropdown__item-serie iz-kfc-dropdown__item-serie--charts"
+            :class="{ active: props.activeSeries.includes(seriesIndex) }"
+            v-for="(series, seriesIndex) in chart.series"
+            @click="toggleSeries(seriesIndex)"
+            v-bind:key="seriesIndex"
+          >
+            <span class="indicator">
+              <svg
+                version="1.1"
+                id="select-x"
+                xmlns="http://www.w3.org/2000/svg"
+                x="0"
+                y="0"
+                viewBox="0 0 13 13"
+                style="enable-background: new 0 0 13 13"
+                xml:space="preserve"
+              >
+                <g id="Desktop">
+                  <g id="Desktop_Mehrjahresvergleich_Menu_1" transform="translate(-329 -980)">
+                    <g id="Group-5-Copy-5" transform="translate(330 981)">
+                      <path
+                        id="Stroke-1"
+                        class="st0"
+                        style="fill: none; stroke: #000; stroke-width: 0.9231"
+                        d="m-.5-.5 12 12"
+                      />
+                      <path
+                        id="Stroke-3"
+                        style="fill: none; stroke: #000; stroke-width: 0.9231"
+                        class="st0"
+                        d="m11.5-.5-12 12"
+                      />
+                    </g>
+                  </g>
+                </g>
+              </svg>
+            </span>
+            <span v-html="getLabel(series.label)"></span>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

package/dev/src/components/SrlPage/KFCApplication/KFCDropdownPeriod.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { ref } from 'vue'
+import SvgDropdown from './theme/SvgDropdown.vue'
+
+const props = defineProps({
+  categories: Array,
+  activeCategories: Array,
+  updateCategories: Function
+})
+
+const open = ref(false)
+
+function toggleCategory(index) {
+  if (props.activeCategories.includes(index)) {
+    props.updateCategories(props.activeCategories.filter((ac) => ac !== null && ac != index))
+  } else {
+    props.updateCategories(
+      [...props.activeCategories, index].sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))
+    )
+  }
+}
+
+function toggleState() {
+  open.value = !open.value
+}
+
+function closeDropdown() {
+  open.value = false
+}
+</script>
+<template>
+  <div
+    class="iz-kfc-dropdown iz-kfc-dropdown--periods"
+    :class="{ open: open }"
+    @blur="closeDropdown()"
+    tabindex="-1"
+  >
+    <div class="iz-kfc-dropdown__title srl-typo-headline3" @click="toggleState()">
+      <span>{{ $t('kfc-dropdown.periods.title') }}</span>
+      <SvgDropdown></SvgDropdown>
+    </div>
+    <div class="iz-kfc-dropdown__list" id="dropdown-content-timeperiods" v-if="open">
+      <div
+        class="iz-kfc-dropdown__item iz-kfc-dropdown__item--period"
+        v-for="(category, index) in props.categories"
+        :class="{ active: props.activeCategories.includes(index) }"
+        @click="toggleCategory(index)"
+        v-bind:key="index"
+      >
+        <span class="indicator">
+          <svg
+            version="1.1"
+            id="select-x"
+            xmlns="http://www.w3.org/2000/svg"
+            x="0"
+            y="0"
+            viewBox="0 0 13 13"
+            style="enable-background: new 0 0 13 13"
+            xml:space="preserve"
+          >
+            <g id="Desktop">
+              <g id="Desktop_Mehrjahresvergleich_Menu_1" transform="translate(-329 -980)">
+                <g id="Group-5-Copy-5" transform="translate(330 981)">
+                  <path
+                    id="Stroke-1"
+                    class="st0"
+                    style="fill: none; stroke: #000; stroke-width: 0.9231"
+                    d="m-.5-.5 12 12"
+                  />
+                  <path
+                    id="Stroke-3"
+                    style="fill: none; stroke: #000; stroke-width: 0.9231"
+                    class="st0"
+                    d="m11.5-.5-12 12"
+                  />
+                </g>
+              </g>
+            </g>
+          </svg>
+        </span>
+        <span>{{ category }}</span>
+      </div>
+    </div>
+  </div>
+</template>

package/dev/src/components/SrlPage/KFCApplication/KFCTable.vue

@@ -0,0 +1,63 @@
+<script setup>
+import Highcharts from 'highcharts'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  categories: Array,
+  series: Array,
+  currentChart: Object,
+  footnotes: Array
+})
+
+const { locale } = useI18n()
+
+function getAxisLabel(serie) {
+  const label =
+    props.currentChart.value[serie.yAxis == 0 ? 'yAxisLabel0' : 'yAxisLabel1'][locale.value]
+  if (label && label.trim().length > 0) return ` (${label})`
+  return ''
+}
+</script>
+
+<template>
+  <div class="kfc-table-wrapper">
+    <table data-tableid="kfc">
+      <tbody>
+        <tr class="head">
+          <td class="head"></td>
+          <td class="srl-horizontal-left ns-horizontal-left head noline"> </td>
+          <td
+            class="ns-horizontal-right line_bold head"
+            :class="{ 'srl-background-05': categoryIndex == props.categories.length - 1 }"
+            v-for="(category, categoryIndex) in props.categories"
+          >
+            {{ category }}
+          </td>
+        </tr>
+        <tr v-for="serie in props.series">
+          <td
+            class="ns-horizontal-left line"
+            v-html="serie.label[locale] + getAxisLabel(serie)"
+          ></td>
+          <td class="srl-horizontal-left ns-horizontal-left noline"> </td>
+          <td
+            class="ns-horizontal-right nowrap"
+            :class="{ 'srl-background-05': dataIndex == serie.data.length - 1 }"
+            v-for="(data, dataIndex) in serie.data"
+          >
+            {{ Highcharts.numberFormat(data, 1) }}
+          </td>
+        </tr>
+        <tr class="konturu">
+          <td class="ns-horizontal-left line konturu"></td>
+          <td class="srl-horizontal-left ns-horizontal-left noline"> </td>
+          <td
+            class="ns-horizontal-right nowrap"
+            :class="{ 'srl-background-05': index === props.series[0]?.data.length - 1 }"
+            v-for="(_, index) in props.series[0]?.data.length"
+          ></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/dev/src/components/SrlPage/KFCApplication/hooks/kfcData.ts

@@ -0,0 +1,9 @@
+import useConfig from '@/composables/config'
+import generateKFCJson from '@/components/SrlPage/KFCApplication/services/xlsxParser'
+
+export default async function useKfcData() {
+  const config = await useConfig()
+  /** @todo überprüfen warum die daten nicht korrekt mit config.value.settings.languages generiert werden */
+  //return await generateKFCJson(config.value.settings.languages);
+  return await generateKFCJson(['de', 'en', 'fr', 'it'])
+}

package/dev/src/components/SrlPage/KFCApplication/models/KFCApplication.ts

@@ -0,0 +1,183 @@
+import { ref } from 'vue'
+import useKfcData from '@/components/SrlPage/KFCApplication/hooks/kfcData'
+
+export class KFCApplication {
+  currentChart
+  jsonData = ref({})
+  searchQueryConfiguration = ref({
+    activeChart: '',
+    chartType: 'column',
+    swapLabels: false,
+    activeCategories: [],
+    activeSeries: [],
+    indexedView: false
+  })
+
+  constructor(locale) {
+    this.currentChart = ref({})
+    this.currentLang = ref('de')
+    this.dataLoaded = ref(false)
+    this.currentLang.value = locale
+
+    this.loadApplicationData().then((data) => {
+      this.jsonData.value = data
+      this.currentChart.value = this.getCharts()[0]
+      this.dataLoaded.value = true
+    })
+  }
+
+  async loadApplicationData() {
+    return await useKfcData()
+  }
+
+  readQuery() {
+    const queryString = window.location.search
+    const searchParams = new URLSearchParams(queryString)
+
+    this.currentChart.value = this.getCharts().find(
+      (chart) => chart.id == searchParams.get('activeChart')
+    )
+    if (!this.currentChart.value) this.currentChart.value = this.getCharts()[0]
+
+    this.searchQueryConfiguration.value = {
+      activeChart: this.currentChart.value.id,
+      chartType: searchParams.get('chartType'),
+      swapLabels: searchParams.get('swapLabels') == '1',
+      activeCategories: searchParams
+        .get('activeCategories')
+        .split(',')
+        .map((n) => parseInt(n)),
+      activeSeries: searchParams
+        .get('activeSeries')
+        .split(',')
+        .map((n) => parseInt(n)),
+      indexedView: searchParams.get('indexed') == '1'
+    }
+  }
+
+  writeDefaultQuery() {
+    if (this.currentChart.value) {
+      this.searchQueryConfiguration.value = {
+        activeChart: this.currentChart.value.id,
+        chartType: 'column',
+        swapLabels: false,
+        activeCategories: this.currentChart.value.defaultActiveCategories.map((a, i) => i),
+        activeSeries: this.currentChart.value.defaultActiveSeries.map((a, i) => i),
+        indexedView: false
+      }
+      this.writeQuery()
+    }
+  }
+
+  getCharts() {
+    if (this.jsonData.value) {
+      return this.jsonData.value || []
+    }
+    return []
+  }
+
+  set activeSeries(newSeries) {
+    this.searchQueryConfiguration.value.activeSeries = newSeries
+    if (!this.canSwapLabels()) {
+      this.swapLabels = false
+
+      return
+    }
+  }
+
+  get activeChart() {
+    return this.searchQueryConfiguration.value.activeChart
+  }
+
+  get activeSeries() {
+    return this.searchQueryConfiguration.value.activeSeries
+  }
+
+  set activeCategories(newCategories) {
+    this.searchQueryConfiguration.value.activeCategories = newCategories
+  }
+
+  get activeCategories() {
+    return this.searchQueryConfiguration.value.activeCategories
+  }
+
+  set swapLabels(newSwapLabel) {
+    this.searchQueryConfiguration.value.swapLabels = newSwapLabel
+  }
+
+  get swapLabels() {
+    return this.searchQueryConfiguration.value.swapLabels
+  }
+
+  set indexed(newIndexed) {
+    this.searchQueryConfiguration.value.indexedView = newIndexed
+  }
+
+  get indexed() {
+    return this.searchQueryConfiguration.value.indexedView
+  }
+
+  get chartType() {
+    return this.searchQueryConfiguration.value.chartType
+  }
+
+  set chartType(newChartType) {
+    this.searchQueryConfiguration.value.chartType = newChartType
+  }
+
+  updateActiveChart(newChart) {
+    this.currentChart.value = newChart
+
+    this.searchQueryConfiguration.value.activeChart = newChart.id
+    this.searchQueryConfiguration.value.activeCategories = newChart.defaultActiveCategories
+    this.searchQueryConfiguration.value.activeSeries = newChart.defaultActiveSeries
+    this.searchQueryConfiguration.value.swapLabels = false
+  }
+
+  changeChartType(newChartType) {
+    this.searchQueryConfiguration.value.chartType = newChartType
+    this.searchQueryConfiguration.value.swapLabels = false
+  }
+
+  loadChartCSV() {}
+
+  processChartCSV() {
+    return {
+      series: [],
+      categories: [],
+      defaultActiveCategories: [],
+      defaultActiveSeries: [],
+      defaultActiveChartType: 'column'
+    }
+  }
+
+  canSwapLabels() {
+    let can = true
+    if (this.currentChart.value.series) {
+      this.currentChart.value.series
+        .filter((s, si) => this.activeSeries.includes(si))
+        .forEach((series) => {
+          can = can && series.type == 'column'
+        })
+    }
+    return can
+  }
+
+  writeQuery() {
+    const url = new URL(window.location.toString())
+    const query = {
+      activeChart: this.searchQueryConfiguration.value.activeChart,
+      chartType: this.searchQueryConfiguration.value.chartType,
+      swapLabels: this.searchQueryConfiguration.value.swapLabels && this.canSwapLabels() ? 1 : 0,
+      activeSeries: this.searchQueryConfiguration.value.activeSeries.join(','),
+      activeCategories: this.searchQueryConfiguration.value.activeCategories.join(','),
+      indexed: this.searchQueryConfiguration.value.indexedView ? 1 : 0
+    }
+
+    Object.keys(query).forEach((key) => {
+      url.searchParams.set(key, query[key])
+    })
+
+    window.history.pushState(null, '', url)
+  }
+}