@simple-reporting/base 1.0.15 → 1.0.17

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

@@ -1,112 +0,0 @@
-<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

@@ -1,85 +0,0 @@
-<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

@@ -1,63 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-import useConfig from 'srl/composables/config'
-import generateKFCJson from '@/components/SrlPage/KFCApplication/services/xlsxParser'
-
-export default async function useKfcData() {
-  const config = 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

@@ -1,183 +0,0 @@
-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)
-  }
-}