add table render to bar charts

internetstandards · Nov 21, 2023 · 3783397 · 3783397
1 parent 0e0972f
commit 3783397
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 30 deletions.
diff --git a/src/components/SiteMenu.vue b/src/components/SiteMenu.vue
@@ -150,7 +150,7 @@ li a {
 
       <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
 
-      <b-collapse id="nav-collapse" is-nav>
+      <b-collapse id="nav-collapse" is-nav >
 
         <!-- sorry for the table here, after hours of fiddling with css to get two ul's below each other i'm done and
          just use the worst option that works. -->

diff --git a/src/components/charts/donutChart.vue b/src/components/charts/donutChart.vue
@@ -49,10 +49,15 @@
   color: #08236B;
 }
 
-.internetnlscore, .score{
+.internetnlscore {
   color: #05BFD6;
 }
 
+.score{
+  color: black;
+  font-weight: bold;
+}
+
 .internetnlscore_rest, .rest{
   color: #FFAC40;
 }

diff --git a/src/components/charts/render-cumulative-percentage-bar-chart.vue b/src/components/charts/render-cumulative-percentage-bar-chart.vue
@@ -12,6 +12,11 @@ import chart_mixin from './chart_mixin.vue'
 
 export default {
     mixins: [chart_mixin],
+
+    props: {
+      chartName: {type: String, required: false, default: ''},
+    },
+
     methods: {
         renderData: function () {
             this.configure_barchart();
@@ -112,7 +117,7 @@ export default {
                 });
 
             });
-
+            this.$store.state.rendered_chart_to_table[this.chartName] = this.chart.data;
             this.chart.update();
         },
         renderTitle: function () {

diff --git a/src/components/charts/render-percentage-bar-chart.vue b/src/components/charts/render-percentage-bar-chart.vue
@@ -12,6 +12,10 @@ import chart_mixin from './chart_mixin.vue'
 export default {
   mixins: [chart_mixin],
 
+  props: {
+    chartName: {type: String, required: false, default: ''},
+  },
+
   methods: {
     renderData: function () {
       this.configure_barchart();
@@ -81,11 +85,15 @@ export default {
             borderWidth: 0,
             lineTension: 0,
             hidden: shown_value === "pct_high",
-            label: `#${this.chart_data[i].id}: ${this.$i18n.t(shown_value)}`,
+            label: this.chart_data.length > 1 ? `#${this.chart_data[i].id}: ${this.$i18n.t(shown_value)}` : `${this.$i18n.t(shown_value)}`,
             // ${this.chart_data[i].calculation.name} ${moment(this.chart_data[i].at_when).format('LL')} n=${this.chart_data[i].total_urls}
           });
         });
       }
+      if (this.$store.state.rendered_chart_to_table === undefined) {
+        this.$store.state.rendered_chart_to_table = {}
+      }
+      this.$store.state.rendered_chart_to_table[this.chartName] = this.chart.data;
       this.chart.update();
     },
     renderTitle: function () {

diff --git a/src/components/reports/NestedReportCharts.vue b/src/components/reports/NestedReportCharts.vue
@@ -1,21 +1,76 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 <style scoped>
 .fixed_ratio {
-  height:500px; min-width: 950px;
+  min-width: 950px;
 }
 </style>
 <template>
   <div>
     <template v-for="chart in charts_to_render">
       <div v-if="chart.level === 1" :key="chart.axis.join('.')">
         <div class="chart-container w-100 position-relative fixed_ratio">
-          <component :is="my_component" :chart_data="reports" :show_average="chart.average" :axis="chart.axis"/>
+          <!-- Do not show canvas chart element in accessibility, use the table below -->
+          <component :is="my_component" :chart_data="reports" :show_average="chart.average" :axis="chart.axis"
+                     chart-name="overall" aria-hidden="true"/>
+          <b-table-simple striped hover small responsive v-if="$store.state.rendered_chart_to_table['overall'] !== undefined">
+            <b-thead>
+              <b-tr>
+                <b-th>{{ $t('category') }}</b-th>
+                <b-th v-for="xAxis in $store.state.rendered_chart_to_table['overall']['datasets']" :key="xAxis.label">
+                  {{ $t(xAxis.label) }}
+                </b-th>
+              </b-tr>
+            </b-thead>
+            <b-tbody>
+
+              <b-tr v-for="(yAxis, yIndex) in $store.state.rendered_chart_to_table['overall']['labels']"
+                    :key="yAxis[0]">
+                <b-td style="width: 20%">
+                  {{ $t(yAxis[0]) }}
+                </b-td>
+                <b-td v-for="(value, index) in $store.state.rendered_chart_to_table['overall']['datasets']"
+                      :key="`${yIndex}${index}`">
+                  {{ value["data"][yIndex] }}%
+                </b-td>
+              </b-tr>
+            </b-tbody>
+          </b-table-simple>
+
         </div>
       </div>
       <div v-else class="not-on-new-page" :key="chart.axis.join('.')">
         <chart-collapse-panel :title="chart.label" :level="chart.level">
-          <component :is="my_component" slot="chart_content" :chart_data="reports" :show_average="chart.average"
-                                :only_show_dynamic_average="chart.only_average" :axis="chart.axis"/>
+          <!-- Do not show canvas chart element in accessibility, use the table below -->
+          <div slot="chart_content">
+          <component :is="my_component"  :chart_data="reports" :show_average="chart.average"
+                     :only_show_dynamic_average="chart.only_average" :axis="chart.axis" :chart-name="chart.label"
+                     aria-hidden="true"/>
+          <b-table-simple striped hover small responsive v-if="$store.state.rendered_chart_to_table[chart.label] !== undefined">
+            <b-thead>
+              <b-tr>
+                <b-th></b-th>
+                <b-th v-for="xAxis in $store.state.rendered_chart_to_table[chart.label]['datasets']" :key="xAxis.label">
+                  {{ $t(xAxis.label) }}
+                </b-th>
+              </b-tr>
+            </b-thead>
+            <b-tbody>
+
+              <b-tr v-for="(yAxis, yIndex) in $store.state.rendered_chart_to_table[chart.label]['labels']"
+                    :key="yAxis[0]">
+                <b-td style="width: 20%">
+                  {{ $t(yAxis[0]) }}
+                </b-td>
+                <b-td v-for="(value, index) in $store.state.rendered_chart_to_table[chart.label]['datasets']"
+                      :key="`${yIndex}${index}`">
+                  {{ value["data"][yIndex] }}%
+                </b-td>
+              </b-tr>
+            </b-tbody>
+          </b-table-simple>
+
+          </div>
+
         </chart-collapse-panel>
       </div>
     </template>
@@ -110,3 +165,15 @@ export default {
   }
 }
 </script>
+<i18n>
+{
+  "en": {
+    "category": "Category",
+    "A": "Average"
+  },
+  "nl": {
+    "category": "Categorie",
+    "G": "Gemiddelde"
+  }
+}
+</i18n>
diff --git a/src/components/reports/ReportTableVirtualList.vue b/src/components/reports/ReportTableVirtualList.vue
@@ -349,7 +349,7 @@ div.rotate > span {
     </collapse-panel>
 
     <div class="start-on-new-page position-relative">
-      <div id=""></div>
+      <div id="report-table"></div>
 
 
         <div class="virtualList">
@@ -371,22 +371,22 @@ div.rotate > span {
             <div slot="header">
 
 
-              <table class="table table-striped" style="position: absolute">
+        <table class="table table-striped" style="position: absolute">
         <thead class="sticky_labels">
 
         <tr class="sticky_labels">
           <th class="sticky-header bg-white col-1" style="width: 100px; min-width: 100px;">
             <div class="rotate">
-              <span @click="sortBy('score')" class="arrow"
-                    :class="sortOrders['score'] === -1 ? 'dsc' : (sortOrders['score'] === 1 ? 'asc' : 'unknown')"></span>
-              <span @click="sortBy('score')">{{ $t("score") }}</span>
+              <a class="arrow"
+                    :class="sortOrders['score'] === -1 ? 'dsc' : (sortOrders['score'] === 1 ? 'asc' : 'unknown')"></a>
+              <a @click="sortBy('score')" href="javascript:;">{{ $t("score") }}</a>
             </div>
           </th>
           <th class="sticky-header bg-white" style="width: 200px; min-width: 200px;">
             <div class="rotate">
-              <div @click="sortBy('url')" class="arrow"
-                   :class="sortOrders['url'] === -1 ? 'dsc' : (sortOrders['url'] === 1 ? 'asc' : 'unknown')"></div>
-              <div @click="sortBy('url')" class="d-inline-block">{{ $t("domain") }}</div>
+              <a class="arrow"
+                   :class="sortOrders['url'] === -1 ? 'dsc' : (sortOrders['url'] === 1 ? 'asc' : 'unknown')"></a>
+              <a @click="sortBy('url')" class="d-inline-block" href="javascript:;">{{ $t("domain") }}</a>
             </div>
           </th>
 
@@ -396,9 +396,9 @@ div.rotate > span {
               <div class="header_top_category"
                    v-for="category in relevant_categories_based_on_settings" :key="category">
                 <div class="rotate">
-                  <span @click="sortBy(category)" class="arrow"
-                        :class="sortOrders[category] === -1 ? 'dsc' : (sortOrders[category] === 1 ? 'asc' : 'unknown')"></span>
-                  <span @click="sortBy(category)">{{ $t("" + category) }}</span>
+                  <a class="arrow"
+                        :class="sortOrders[category] === -1 ? 'dsc' : (sortOrders[category] === 1 ? 'asc' : 'unknown')"></a>
+                  <a @click="sortBy(category)" href="javascript:;">{{ $t("" + category) }}</a>
                 </div>
               </div>
 
@@ -408,13 +408,13 @@ div.rotate > span {
               <div class="header_sub_category"
                    v-for="category in relevant_categories_based_on_settings" :key="category">
                 <div class="rotate nowrap">
-                  <div @click="sortBy(category)" class="arrow"
-                       :class="sortOrders[category] === -1 ? 'dsc' : (sortOrders[category] === 1 ? 'asc' : 'unknown')"></div>
-                  <div @click="sortBy(category)" class="d-inline-block">
+                  <a class="arrow"
+                       :class="sortOrders[category] === -1 ? 'dsc' : (sortOrders[category] === 1 ? 'asc' : 'unknown')"></a>
+                  <a @click="sortBy(category)" class="d-inline-block" href="javascript:;">
                     {{ $t("" + category) }}
-                    <div class="small text-secondary pl-3 close_to_top"
+                    <div class="small text-secondary pl-3 close_to_top" href="#"
                         v-html="category_from_field_name(category)"></div>
-                  </div>
+                  </a>
                 </div>
               </div>
 

diff --git a/src/components/signup/SignupForm.vue b/src/components/signup/SignupForm.vue
@@ -85,12 +85,12 @@
       </b-form-group>
 
       <div class="mb-2" style="font-weight: bold">{{ $t('nature_of_organization')}}:</div>
-      <b-form-group id="input-group-nature-of-organization" v-slot="{ ariaDescribedby }" :legend="$t('nature_of_organization')">
+      <b-form-group id="input-group-nature-of-organization" v-slot="{ ariaDescribedby }" :label="$t('nature_of_organization')">
         <b-form-radio-group
           v-model="form.nature_of_organization"
-          :label="$t('nature_of_organization')"
           id="radios-nature-of-organization"
           :aria-describedby="ariaDescribedby"
+          plain stacked
         >
           <b-form-radio value="government">{{$t('nature_government')}}</b-form-radio>
           <b-form-radio value="non-profit">{{$t('nature_non_profit')}}</b-form-radio>
@@ -163,10 +163,10 @@
       </b-form-group>
 
 
-      <b-form-group id="input-group-terms-of-use" v-slot="{ ariaDescribedby }">
+      <b-form-group id="input-group-terms-of-use" v-slot="{ ariaDescribedby }" :label="$t('terms_of_use')">
         <b-form-checkbox-group
           v-model="form.terms_of_use"
-          :label="$t('terms_of_use')"
+
           :state="form.terms_of_use.includes('accepted')"
           id="checkboxes-terms-of-use"
           :aria-describedby="ariaDescribedby"
@@ -179,7 +179,7 @@
           &nbsp;
         </b-form-invalid-feedback>
       </b-form-group>
-      <b-button type="submit" variant="info"><b>{{ $t('submit') }}</b></b-button>
+      <button type="submit" variant="info"><b>{{ $t('submit') }}</b></button>
     </b-form>
 
   </div>

diff --git a/src/components/tour/DemoImage.vue b/src/components/tour/DemoImage.vue
@@ -5,7 +5,7 @@
         :index="index"
         @close="index = null">
     </CoolLightBox>
-    <a @click="index = 0" href="#">
+    <a @click="index = 0" href="#" :aria-label="caption">
       <figure>
         <b-img-lazy fluid rounded blank-color="#777"
                     :src="`/static_frontend/images/demo/${filename}.png`" :alt="caption"></b-img-lazy>

diff --git a/src/main.js b/src/main.js
@@ -117,6 +117,11 @@ const store = new Vuex.Store({
 
         // what tags are used to filter reports
         tags: [],
+
+        // tables for reports, rendered by chartjs, and then shown as table, not really nice but fastest to get this
+        rendered_chart_to_table: {
+            'overall': {}
+        }
     },
 
     mutations: {