WIP - minor fixes

Author: Adrian Hurtado

demo/App.vue

@@ -29,6 +29,8 @@
             />
             <LinesTest />
             <StackedLinesTest />
+            <BarsTest />
+            <LinesVerticalTest />
             <BarsHorizontalTest />
             <button
                 class="Btn"
@@ -43,7 +45,9 @@
 <script>
 import { Cartesian, Pie, Scatter } from './sections'
 import LinesTest from './sections/tests/lines/LinesTest.vue'
+import LinesVerticalTest from './sections/tests/lines/LinesVerticalTest.vue'
 import StackedLinesTest from './sections/tests/lines/StackedLinesTest.vue'
+import BarsTest from './sections/tests/bars/BarsTest.vue'
 import BarsHorizontalTest from './sections/tests/bars/BarsHorizontalTest.vue'
 
 const dataOne = [
@@ -101,7 +105,9 @@ export default {
         Pie,
         Scatter,
         LinesTest,
+        LinesVerticalTest,
         StackedLinesTest,
+        BarsTest,
         BarsHorizontalTest,
     },
     data () {

demo/sections/tests/lines/LinesHorizontalTest.vue

@@ -0,0 +1,77 @@
+<template>
+    <div>
+        <WChart
+            :dataset="dataset"
+            responsive
+            :padding="30"
+        >
+            <WXAxis
+                id="fruits"
+                position="top"
+                reversed
+                :numTicks="4"
+                :domain="[0]"
+            />
+            <WYAxis
+                id="month"
+                type="categorical"
+                datakey="month"
+                position="right"
+                :categoricalPadding="0"
+            />
+
+            <WLine
+                xDatakey="apples"
+                label="apples"
+                color="red"
+            />
+            <WLine
+                xDatakey="bananas"
+                label="bananas"
+                color="yellow"
+            />
+            <WLine
+                xDatakey="pears"
+                label="pears"
+                color="green"
+            />
+            <WLine
+                xDatakey="cherries"
+                label="cherries"
+                color="blue"
+            />
+            <Legend />
+        </WChart>
+
+        <div>
+            <button
+                class="Btn"
+                @click="change"
+            >
+                Change dataset
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+import Legend from '../../../../src/components/Legend/Legend.vue'
+import { randomFruitsDataset } from '../randomDataset'
+
+export default {
+    name: 'LinesVerticalTest',
+    components: {
+        Legend,
+    },
+    data () {
+        return {
+            dataset: randomFruitsDataset(),
+        }
+    },
+    methods: {
+        change () {
+            this.dataset = randomFruitsDataset()
+        },
+    },
+}
+</script>

demo/sections/tests/lines/LinesVerticalTest.vue

@@ -31,10 +31,10 @@ export function obtainCategories ({ dataset, datakeys, allowDuplicatedCategory }
  * @returns {number[]} [min, max]
  */
 export function obtainNumericDataDomainFromValue (value) {
-    if (value === undefined) return undefined
+    if (value === undefined || value === null) return undefined
     if (typeof value === 'number') return [value, value]
-    const valuesArray = Array.isArray(value) ? value : Object.values(value)
-    return [Math.min(...valuesArray), Math.max(...valuesArray)]
+    const valuesArray = Array.isArray(value) ? value : Object.values(value).filter(v => typeof v === 'number')
+    return valuesArray.length > 0 ? [Math.min(...valuesArray), Math.max(...valuesArray)] : undefined
 }
 export function obtainNumericDataDomainFromDatakey ({ dataset, series, datakey }) {
     const datums = getDatums({ dataset, series })
@@ -43,7 +43,7 @@ export function obtainNumericDataDomainFromDatakey ({ dataset, series, datakey }
         let overallMax = -Infinity
         datums.forEach((datum) => {
             const value = datakeyValue(datum, datakey)
-            const [currentMin, currentMax] = obtainNumericDataDomainFromValue(value)
+            const [currentMin, currentMax] = obtainNumericDataDomainFromValue(value) || [Infinity, -Infinity]
             overallMin = Math.min(overallMin, currentMin)
             overallMax = Math.max(overallMax, currentMax)
         })

src/components/Axis/axisUtils.js

@@ -125,8 +125,8 @@ export default {
             const { stackData } = this
             if (stackData.length > 0) {
                 return [
-                    Math.min(...stackData.map(stackDataItem => Math.min(...stackDataItem.map(range => range[0])))),
-                    Math.max(...stackData.map(stackDataItem => Math.max(...stackDataItem.map(range => range[1])))),
+                    Math.min(...stackData.map(stackDataItem => Math.min(...stackDataItem.map(range => range[0]).filter(v => typeof v === 'number' && !Number.isNaN(v))))),
+                    Math.max(...stackData.map(stackDataItem => Math.max(...stackDataItem.map(range => range[1]).filter(v => typeof v === 'number' && !Number.isNaN(v))))),
                 ]
             }
             return undefined

src/components/Stack/Stack.vue

@@ -4,9 +4,8 @@ import d3Transition from 'd3-transition/dist/d3-transition'
 import getD3Curve from './getD3Curve'
 
 const normalizeAccessor = accessor => (typeof accessor === 'string' ? d => d[accessor] : accessor)
-const isUndefinedOrNull = x => x === undefined || x === null
 const normalizeDefined = (defined, ...accessors) => (
-    (defined === true && (d => !accessors.some(accessor => isUndefinedOrNull(accessor(d))))) ||
+    (defined === true && (d => !accessors.some(accessor => accessor(d) === undefined))) ||
     defined ||
     (() => true)
 )