@byu-oit/vue-decision-processing-components 8.35.8 → 8.35.9

package/StatCharts.vue

@@ -1,196 +1,196 @@
-<!--
-   Copyright 2018 Brigham Young University
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
--->
-<template>
-  <div class="chart-container">
-    <h3>Trend Analysis</h3>
-    <svg class="chart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60" preserveAspectRatio="none">
-      <defs>
-        <linearGradient id="bgGradient" x1="0" x2="0" y1="0" y2="1">
-          <stop offset="0%" stop-color="#e0e1e2" />
-          <stop offset="25%" stop-color="#ffffff" stop-opacity="0" />
-        </linearGradient>
-      </defs>
-      <rect x="0" y="0" width="100" height="60" fill="url(#bgGradient)" />
-      <g transform="scale(1, 0.9) translate(0, 2)">
-        <line x1="0" x2="100" y1="60" y2="60" stroke-dasharray="0.2 0.1" class="tick" />
-        <text x="4" y="60" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">0</text>
-      
-        <line x1="0" x2="100" y1="55.38461538461539" y2="55.38461538461539" stroke-dasharray="0.2 0.1" class="tick" />
-        <text x="4" y="55.38461538461539" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">2</text>
-      
-        <line x1="0" x2="100" y1="50.76923076923077" y2="50.76923076923077" stroke-dasharray="0.2 0.1" class="tick" />
-        <text x="4" y="50.76923076923077" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">4</text>
-      
-        <line x1="0" x2="100" y1="46.15384615384615" y2="46.15384615384615" stroke-dasharray="0.2 0.1" class="tick" />
-        <text x="4" y="46.15384615384615" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">6</text>
-      
-        <line x1="0" x2="100" y1="41.53846153846153" y2="41.53846153846153" stroke-dasharray="0.2 0.1" class="tick" />
-        <text x="4" y="41.53846153846153" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">8</text>
-      
-        <line x1="0" x2="100" y1="36.92307692307692" y2="36.92307692307692" stroke-dasharray="0.2 0.1" class="tick" />
-        <text x="4" y="36.92307692307692" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">10</text>
-      
-        <line x1="0" x2="100" y1="32.30769230769231" y2="32.30769230769231" stroke-dasharray="0.2 0.1" class="tick" />
-        <text x="4" y="32.30769230769231" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">12</text>
-      
-        <line x1="0" x2="100" y1="27.692307692307693" y2="27.692307692307693" stroke-dasharray="0.2 0.1" class="tick" />
-        <text x="4" y="27.692307692307693" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">14</text>
-      
-        <line x1="0" x2="100" y1="23.076923076923073" y2="23.076923076923073" stroke-dasharray="0.2 0.1" class="tick" />
-        <text x="4" y="23.076923076923073" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">16</text>
-      
-        <line x1="0" x2="100" y1="18.46153846153846" y2="18.46153846153846" stroke-dasharray="0.2 0.1" class="tick" />
-        <text x="4" y="18.46153846153846" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">18</text>
-      
-        <line x1="0" x2="100" y1="13.846153846153847" y2="13.846153846153847" stroke-dasharray="0.2 0.1" class="tick" />
-        <text x="4" y="13.846153846153847" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">20</text>
-      
-        <line x1="0" x2="100" y1="9.230769230769234" y2="9.230769230769234" stroke-dasharray="0.2 0.1" class="tick" />
-        <text x="4" y="9.230769230769234" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">22</text>
-      
-        <line x1="0" x2="100" y1="4.615384615384613" y2="4.615384615384613" stroke-dasharray="0.2 0.1" class="tick" />
-        <text x="4" y="4.615384615384613" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">24</text>
-      
-        <line x1="0" x2="100" y1="0" y2="0" stroke-dasharray="0.2 0.1" class="tick" />
-        <text x="4" y="0" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">26</text>
-      </g>
-      <g transform="scale(0.9, 1) translate(10, 0)">
-        <text class="tick-label" x="3.2374100719424455" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 4</text>
-      
-        <text class="tick-label" x="10.431654676258992" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 5</text>
-      
-        <text class="tick-label" x="17.62589928057554" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 6</text>
-      
-        <text class="tick-label" x="24.820143884892087" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 7</text>
-      
-        <text class="tick-label" x="32.01438848920863" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 8</text>
-      
-        <text class="tick-label" x="39.20863309352518" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 9</text>
-      
-        <text class="tick-label" x="46.40287769784173" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 10</text>
-      
-        <text class="tick-label" x="53.59712230215827" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 11</text>
-      
-        <text class="tick-label" x="60.79136690647482" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 12</text>
-      
-        <text class="tick-label" x="67.98561151079136" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 13</text>
-      
-        <text class="tick-label" x="75.1798561151079" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 14</text>
-      
-        <text class="tick-label" x="82.37410071942446" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 15</text>
-      
-        <text class="tick-label" x="89.568345323741" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 16</text>
-      
-        <text class="tick-label" x="96.76258992805754" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 17</text>
-      </g>
-      <g transform="scale(0.9) translate(10, 2)">
-        <rect class="bar" x="0.3597122302158269" y="11.53846153846154" width="5.755395683453237" height="48.46153846153846"/>
-        <text class="bar-label" x="3.2374100719424455" y="11.53846153846154" dy="2" text-anchor="middle" font-size="1.4">21</text>
-      
-        <rect class="bar" x="7.553956834532373" y="30" width="5.755395683453237" height="30"/>
-        <text class="bar-label" x="10.431654676258992" y="30" dy="2" text-anchor="middle" font-size="1.4">13</text>
-      
-        <rect class="bar" x="14.74820143884892" y="32.30769230769231" width="5.755395683453237" height="27.692307692307693"/>
-        <text class="bar-label" x="17.62589928057554" y="32.30769230769231" dy="2" text-anchor="middle" font-size="1.4">12</text>
-      
-        <rect class="bar" x="21.942446043165468" y="11.53846153846154" width="5.755395683453237" height="48.46153846153846"/>
-        <text class="bar-label" x="24.820143884892087" y="11.53846153846154" dy="2" text-anchor="middle" font-size="1.4">21</text>
-      
-        <rect class="bar" x="29.136690647482013" y="0" width="5.755395683453237" height="60"/>
-        <text class="bar-label" x="32.01438848920863" y="0" dy="2" text-anchor="middle" font-size="1.4">26</text>
-      
-        <rect class="bar" x="36.33093525179856" y="9.230769230769234" width="5.755395683453237" height="50.76923076923077"/>
-        <text class="bar-label" x="39.20863309352518" y="9.230769230769234" dy="2" text-anchor="middle" font-size="1.4">22</text>
-      
-        <rect class="bar" x="43.52517985611511" y="11.53846153846154" width="5.755395683453237" height="48.46153846153846"/>
-        <text class="bar-label" x="46.40287769784173" y="11.53846153846154" dy="2" text-anchor="middle" font-size="1.4">21</text>
-      
-        <rect class="bar" x="50.719424460431654" y="18.46153846153846" width="5.755395683453237" height="41.53846153846154"/>
-        <text class="bar-label" x="53.59712230215827" y="18.46153846153846" dy="2" text-anchor="middle" font-size="1.4">18</text>
-      
-        <rect class="bar" x="57.9136690647482" y="30" width="5.755395683453237" height="30"/>
-        <text class="bar-label" x="60.79136690647482" y="30" dy="2" text-anchor="middle" font-size="1.4">13</text>
-      
-        <rect class="bar" x="65.10791366906474" y="18.46153846153846" width="5.755395683453237" height="41.53846153846154"/>
-        <text class="bar-label" x="67.98561151079136" y="18.46153846153846" dy="2" text-anchor="middle" font-size="1.4">18</text>
-      
-        <rect class="bar" x="72.30215827338128" y="0" width="5.755395683453237" height="60"/>
-        <text class="bar-label" x="75.1798561151079" y="0" dy="2" text-anchor="middle" font-size="1.4">26</text>
-      
-        <rect class="bar" x="79.49640287769785" y="32.30769230769231" width="5.755395683453237" height="27.692307692307693"/>
-        <text class="bar-label" x="82.37410071942446" y="32.30769230769231" dy="2" text-anchor="middle" font-size="1.4">12</text>
-      
-        <rect class="bar" x="86.69064748201438" y="23.076923076923073" width="5.755395683453237" height="36.92307692307693"/>
-        <text class="bar-label" x="89.568345323741" y="23.076923076923073" dy="2" text-anchor="middle" font-size="1.4">16</text>
-      
-        <rect class="bar" x="93.88489208633092" y="23.076923076923073" width="5.755395683453237" height="36.92307692307693"/>
-        <text class="bar-label" x="96.76258992805754" y="23.076923076923073" dy="2" text-anchor="middle" font-size="1.4">16</text>
-      </g>
-    </svg>
-  
-  </div>
-</template>
-<script>
-  const buildChartPath = (data) => {
-    const start = "M0.2,49.8"
-    const end = "L99.8,49.8 Z"
-    const xoff = 99.6 / (data.length - 1)
-    const maxVal = Math.max(...data)
-    const yscale = (voff => v => 50 - voff * v)(49.6 / maxVal)
-    const points = data.map((v, i) => `L${0.2+xoff*i},${yscale(v)}`)
-    return [start, ...points, end].join(' ')
-  }
-
-  export default {
-    name: 'StatCharts',
-    computed: {
-      admit () {
-        return [1,2,3,4,5,6,7].map(v => Math.floor(Math.random() * 120))
-      },
-      apply () {
-        return [1,2,3,4,5,6,7].map(v => Math.floor(Math.random() * 120))
-      },
-      admitPath () {
-        return buildChartPath(this.admit)
-      },
-      applyPath () {
-        return buildChartPath(this.apply)
-      }
-    }
-  }
-</script>
-<style scoped>
-  .chart {
-    width: 100%;
-  }
-  .bar{
-    fill: #30495f;
-  }
-
-  .tick {
-    stroke: #ccc;
-    stroke-width: 0.2;
-  }
-
-  .tick-label {
-    font-family: "Helvetica Nue", Arial, sans-serif;
-  }
-
-  .bar-label {
-    font-family: "Helvetica Nue", Arial, sans-serif;
-    fill: white;
-  }
-</style>
+<!--
+   Copyright 2018 Brigham Young University
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+-->
+<template>
+  <div class="chart-container">
+    <h3>Trend Analysis</h3>
+    <svg class="chart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60" preserveAspectRatio="none">
+      <defs>
+        <linearGradient id="bgGradient" x1="0" x2="0" y1="0" y2="1">
+          <stop offset="0%" stop-color="#e0e1e2" />
+          <stop offset="25%" stop-color="#ffffff" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+      <rect x="0" y="0" width="100" height="60" fill="url(#bgGradient)" />
+      <g transform="scale(1, 0.9) translate(0, 2)">
+        <line x1="0" x2="100" y1="60" y2="60" stroke-dasharray="0.2 0.1" class="tick" />
+        <text x="4" y="60" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">0</text>
+      
+        <line x1="0" x2="100" y1="55.38461538461539" y2="55.38461538461539" stroke-dasharray="0.2 0.1" class="tick" />
+        <text x="4" y="55.38461538461539" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">2</text>
+      
+        <line x1="0" x2="100" y1="50.76923076923077" y2="50.76923076923077" stroke-dasharray="0.2 0.1" class="tick" />
+        <text x="4" y="50.76923076923077" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">4</text>
+      
+        <line x1="0" x2="100" y1="46.15384615384615" y2="46.15384615384615" stroke-dasharray="0.2 0.1" class="tick" />
+        <text x="4" y="46.15384615384615" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">6</text>
+      
+        <line x1="0" x2="100" y1="41.53846153846153" y2="41.53846153846153" stroke-dasharray="0.2 0.1" class="tick" />
+        <text x="4" y="41.53846153846153" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">8</text>
+      
+        <line x1="0" x2="100" y1="36.92307692307692" y2="36.92307692307692" stroke-dasharray="0.2 0.1" class="tick" />
+        <text x="4" y="36.92307692307692" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">10</text>
+      
+        <line x1="0" x2="100" y1="32.30769230769231" y2="32.30769230769231" stroke-dasharray="0.2 0.1" class="tick" />
+        <text x="4" y="32.30769230769231" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">12</text>
+      
+        <line x1="0" x2="100" y1="27.692307692307693" y2="27.692307692307693" stroke-dasharray="0.2 0.1" class="tick" />
+        <text x="4" y="27.692307692307693" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">14</text>
+      
+        <line x1="0" x2="100" y1="23.076923076923073" y2="23.076923076923073" stroke-dasharray="0.2 0.1" class="tick" />
+        <text x="4" y="23.076923076923073" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">16</text>
+      
+        <line x1="0" x2="100" y1="18.46153846153846" y2="18.46153846153846" stroke-dasharray="0.2 0.1" class="tick" />
+        <text x="4" y="18.46153846153846" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">18</text>
+      
+        <line x1="0" x2="100" y1="13.846153846153847" y2="13.846153846153847" stroke-dasharray="0.2 0.1" class="tick" />
+        <text x="4" y="13.846153846153847" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">20</text>
+      
+        <line x1="0" x2="100" y1="9.230769230769234" y2="9.230769230769234" stroke-dasharray="0.2 0.1" class="tick" />
+        <text x="4" y="9.230769230769234" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">22</text>
+      
+        <line x1="0" x2="100" y1="4.615384615384613" y2="4.615384615384613" stroke-dasharray="0.2 0.1" class="tick" />
+        <text x="4" y="4.615384615384613" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">24</text>
+      
+        <line x1="0" x2="100" y1="0" y2="0" stroke-dasharray="0.2 0.1" class="tick" />
+        <text x="4" y="0" dy="-0.3" text-anchor="end" font-size="1.4" class="tick-label">26</text>
+      </g>
+      <g transform="scale(0.9, 1) translate(10, 0)">
+        <text class="tick-label" x="3.2374100719424455" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 4</text>
+      
+        <text class="tick-label" x="10.431654676258992" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 5</text>
+      
+        <text class="tick-label" x="17.62589928057554" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 6</text>
+      
+        <text class="tick-label" x="24.820143884892087" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 7</text>
+      
+        <text class="tick-label" x="32.01438848920863" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 8</text>
+      
+        <text class="tick-label" x="39.20863309352518" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 9</text>
+      
+        <text class="tick-label" x="46.40287769784173" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 10</text>
+      
+        <text class="tick-label" x="53.59712230215827" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 11</text>
+      
+        <text class="tick-label" x="60.79136690647482" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 12</text>
+      
+        <text class="tick-label" x="67.98561151079136" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 13</text>
+      
+        <text class="tick-label" x="75.1798561151079" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 14</text>
+      
+        <text class="tick-label" x="82.37410071942446" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 15</text>
+      
+        <text class="tick-label" x="89.568345323741" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 16</text>
+      
+        <text class="tick-label" x="96.76258992805754" y="60" dy="-1.3" text-anchor="middle" font-size="1.4">May 17</text>
+      </g>
+      <g transform="scale(0.9) translate(10, 2)">
+        <rect class="bar" x="0.3597122302158269" y="11.53846153846154" width="5.755395683453237" height="48.46153846153846"/>
+        <text class="bar-label" x="3.2374100719424455" y="11.53846153846154" dy="2" text-anchor="middle" font-size="1.4">21</text>
+      
+        <rect class="bar" x="7.553956834532373" y="30" width="5.755395683453237" height="30"/>
+        <text class="bar-label" x="10.431654676258992" y="30" dy="2" text-anchor="middle" font-size="1.4">13</text>
+      
+        <rect class="bar" x="14.74820143884892" y="32.30769230769231" width="5.755395683453237" height="27.692307692307693"/>
+        <text class="bar-label" x="17.62589928057554" y="32.30769230769231" dy="2" text-anchor="middle" font-size="1.4">12</text>
+      
+        <rect class="bar" x="21.942446043165468" y="11.53846153846154" width="5.755395683453237" height="48.46153846153846"/>
+        <text class="bar-label" x="24.820143884892087" y="11.53846153846154" dy="2" text-anchor="middle" font-size="1.4">21</text>
+      
+        <rect class="bar" x="29.136690647482013" y="0" width="5.755395683453237" height="60"/>
+        <text class="bar-label" x="32.01438848920863" y="0" dy="2" text-anchor="middle" font-size="1.4">26</text>
+      
+        <rect class="bar" x="36.33093525179856" y="9.230769230769234" width="5.755395683453237" height="50.76923076923077"/>
+        <text class="bar-label" x="39.20863309352518" y="9.230769230769234" dy="2" text-anchor="middle" font-size="1.4">22</text>
+      
+        <rect class="bar" x="43.52517985611511" y="11.53846153846154" width="5.755395683453237" height="48.46153846153846"/>
+        <text class="bar-label" x="46.40287769784173" y="11.53846153846154" dy="2" text-anchor="middle" font-size="1.4">21</text>
+      
+        <rect class="bar" x="50.719424460431654" y="18.46153846153846" width="5.755395683453237" height="41.53846153846154"/>
+        <text class="bar-label" x="53.59712230215827" y="18.46153846153846" dy="2" text-anchor="middle" font-size="1.4">18</text>
+      
+        <rect class="bar" x="57.9136690647482" y="30" width="5.755395683453237" height="30"/>
+        <text class="bar-label" x="60.79136690647482" y="30" dy="2" text-anchor="middle" font-size="1.4">13</text>
+      
+        <rect class="bar" x="65.10791366906474" y="18.46153846153846" width="5.755395683453237" height="41.53846153846154"/>
+        <text class="bar-label" x="67.98561151079136" y="18.46153846153846" dy="2" text-anchor="middle" font-size="1.4">18</text>
+      
+        <rect class="bar" x="72.30215827338128" y="0" width="5.755395683453237" height="60"/>
+        <text class="bar-label" x="75.1798561151079" y="0" dy="2" text-anchor="middle" font-size="1.4">26</text>
+      
+        <rect class="bar" x="79.49640287769785" y="32.30769230769231" width="5.755395683453237" height="27.692307692307693"/>
+        <text class="bar-label" x="82.37410071942446" y="32.30769230769231" dy="2" text-anchor="middle" font-size="1.4">12</text>
+      
+        <rect class="bar" x="86.69064748201438" y="23.076923076923073" width="5.755395683453237" height="36.92307692307693"/>
+        <text class="bar-label" x="89.568345323741" y="23.076923076923073" dy="2" text-anchor="middle" font-size="1.4">16</text>
+      
+        <rect class="bar" x="93.88489208633092" y="23.076923076923073" width="5.755395683453237" height="36.92307692307693"/>
+        <text class="bar-label" x="96.76258992805754" y="23.076923076923073" dy="2" text-anchor="middle" font-size="1.4">16</text>
+      </g>
+    </svg>
+  
+  </div>
+</template>
+<script>
+  const buildChartPath = (data) => {
+    const start = "M0.2,49.8"
+    const end = "L99.8,49.8 Z"
+    const xoff = 99.6 / (data.length - 1)
+    const maxVal = Math.max(...data)
+    const yscale = (voff => v => 50 - voff * v)(49.6 / maxVal)
+    const points = data.map((v, i) => `L${0.2+xoff*i},${yscale(v)}`)
+    return [start, ...points, end].join(' ')
+  }
+
+  export default {
+    name: 'StatCharts',
+    computed: {
+      admit () {
+        return [1,2,3,4,5,6,7].map(v => Math.floor(Math.random() * 120))
+      },
+      apply () {
+        return [1,2,3,4,5,6,7].map(v => Math.floor(Math.random() * 120))
+      },
+      admitPath () {
+        return buildChartPath(this.admit)
+      },
+      applyPath () {
+        return buildChartPath(this.apply)
+      }
+    }
+  }
+</script>
+<style scoped>
+  .chart {
+    width: 100%;
+  }
+  .bar{
+    fill: #30495f;
+  }
+
+  .tick {
+    stroke: #ccc;
+    stroke-width: 0.2;
+  }
+
+  .tick-label {
+    font-family: "Helvetica Nue", Arial, sans-serif;
+  }
+
+  .bar-label {
+    font-family: "Helvetica Nue", Arial, sans-serif;
+    fill: white;
+  }
+</style>