npm - w-plot-vue - Versions diffs - 1.0.0 → 1.0.2 - Mend

w-plot-vue 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (140) hide show

package/README.md +4 -4
package/dist/w-plot-vue.umd.js +7 -0
package/dist/w-plot-vue.umd.js.map +1 -0
package/docs/examples/app.html +1 -1
package/docs/examples/app.umd.js +2 -2
package/docs/examples/app.umd.js.map +1 -1
package/docs/examples/w-bar_horizontal_multi-set(color).html +10 -10
package/docs/examples/w-bar_horizontal_multi-set(color, gradient).html +10 -10
package/docs/examples/w-bar_horizontal_multi-set(series color).html +10 -10
package/docs/examples/w-bar_horizontal_multi-set(series color, gradient).html +10 -10
package/docs/examples/w-bar_horizontal_multi-set.html +10 -10
package/docs/examples/w-bar_horizontal_multi-set__barDisplay(stackNormal).html +10 -10
package/docs/examples/w-bar_horizontal_multi-set__barDisplay(stackPercent).html +10 -10
package/docs/examples/w-bar_horizontal_multi-set__hide legned.html +10 -10
package/docs/examples/w-bar_horizontal_multi-set__show labels.html +10 -10
package/docs/examples/w-bar_horizontal_multi-set_barKpColor(gradient).html +10 -10
package/docs/examples/w-bar_horizontal_multi-set_barKpColor.html +10 -10
package/docs/examples/w-bar_horizontal_multi-set_barUseInnerLabelsForHorizontal_barGroupWidthRatio.html +496 -0
package/docs/examples/w-bar_horizontal_multi-set_barWidthRatio.html +10 -10
package/docs/examples/w-bar_horizontal_multi-set_barWidthRatio_barGroupWidthRatio.html +10 -10
package/docs/examples/w-bar_horizontal_one-set(color).html +10 -10
package/docs/examples/w-bar_horizontal_one-set(color, gradient).html +10 -10
package/docs/examples/w-bar_horizontal_one-set.html +10 -10
package/docs/examples/w-bar_horizontal_one-set_barColor(gradient).html +10 -10
package/docs/examples/w-bar_horizontal_one-set_barColor.html +10 -10
package/docs/examples/w-bar_horizontal_one-set_barKpColor(gradient).html +10 -10
package/docs/examples/w-bar_horizontal_one-set_barKpColor.html +10 -10
package/docs/examples/w-bar_horizontal_one-set_barUseInnerLabelsForHorizontal.html +493 -0
package/docs/examples/w-bar_horizontal_one-set_barWidthRatio.html +10 -10
package/docs/examples/w-bar_horizontal_one-set_barWidthRatio_barGroupWidthRatio.html +10 -10
package/docs/examples/w-bar_horizontal_one-set_hide labels.html +10 -10
package/docs/examples/w-bar_horizontal_one-set_marginLeft_marginRight.html +10 -10
package/docs/examples/w-bar_horizontal_one-set_show legned.html +10 -10
package/docs/examples/w-bar_multi-set(color).html +10 -10
package/docs/examples/w-bar_multi-set(color, gradient).html +10 -10
package/docs/examples/w-bar_multi-set(series color).html +10 -10
package/docs/examples/w-bar_multi-set(series color, gradient).html +10 -10
package/docs/examples/w-bar_multi-set.html +10 -10
package/docs/examples/w-bar_multi-set__barDisplay(stackNormal).html +10 -10
package/docs/examples/w-bar_multi-set__barDisplay(stackNormal)_.html +10 -10
package/docs/examples/w-bar_multi-set__barDisplay(stackPercent).html +10 -10
package/docs/examples/w-bar_multi-set__hide legned.html +10 -10
package/docs/examples/w-bar_multi-set__show labels.html +10 -10
package/docs/examples/w-bar_multi-set_barKpColor(gradient).html +10 -10
package/docs/examples/w-bar_multi-set_barKpColor.html +10 -10
package/docs/examples/w-bar_multi-set_barWidthRatio.html +10 -10
package/docs/examples/w-bar_multi-set_barWidthRatio_barGroupWidthRatio_barBorderRadius.html +10 -10
package/docs/examples/w-bar_one-set(color).html +10 -10
package/docs/examples/w-bar_one-set(color, gradient).html +10 -10
package/docs/examples/w-bar_one-set.html +10 -10
package/docs/examples/w-bar_one-set_barColor(gradient).html +10 -10
package/docs/examples/w-bar_one-set_barColor.html +10 -10
package/docs/examples/w-bar_one-set_barKpColor(gradient).html +10 -10
package/docs/examples/w-bar_one-set_barKpColor.html +10 -10
package/docs/examples/w-bar_one-set_barWidthRatio.html +10 -10
package/docs/examples/w-bar_one-set_barWidthRatio_barGroupWidthRatio_barBorderRadius.html +10 -10
package/docs/examples/w-bar_one-set_hide labels.html +10 -10
package/docs/examples/w-bar_one-set_marginLeft_marginRight_marginTop.html +10 -10
package/docs/examples/w-bar_one-set_show legned.html +10 -10
package/docs/examples/w-pie_one-set(color).html +5 -5
package/docs/examples/w-pie_one-set(color, gradient).html +5 -5
package/docs/examples/w-pie_one-set.html +5 -5
package/docs/examples/w-pie_one-set_hide labels.html +5 -5
package/docs/examples/w-pie_one-set_hide legned.html +5 -5
package/docs/examples/w-pie_one-set_marginLeft_marginRight_marginTop.html +5 -5
package/docs/examples/w-pie_one-set_pieBorderRadius.html +5 -5
package/docs/examples/w-pie_one-set_pieBorderWidth_pieBorderRadius.html +5 -5
package/docs/examples/w-pie_one-set_pieKpColor(gradient).html +5 -5
package/docs/examples/w-pie_one-set_pieKpColor.html +5 -5
package/docs/examples/w-pie_one-set_pieThicknessRatio.html +5 -5
package/docs/examples/w-plot_default.html +1 -1
package/docs/examples/w-rose_multi-set(color).html +10 -10
package/docs/examples/w-rose_multi-set(color, gradient).html +10 -10
package/docs/examples/w-rose_multi-set(series color).html +10 -10
package/docs/examples/w-rose_multi-set(series color, gradient).html +10 -10
package/docs/examples/w-rose_multi-set.html +10 -10
package/docs/examples/w-rose_multi-set__hide legned.html +10 -10
package/docs/examples/w-rose_multi-set__show labels.html +10 -10
package/docs/examples/w-rose_multi-set_roseBorderWidth.html +10 -10
package/docs/examples/w-rose_multi-set_roseKpColor(gradient).html +10 -10
package/docs/examples/w-rose_multi-set_roseKpColor.html +10 -10
package/docs/examples/w-rose_multi-set_roseWidthRatio.html +10 -10
package/docs/examples/w-rose_one-set(color).html +10 -10
package/docs/examples/w-rose_one-set(color, gradient).html +10 -10
package/docs/examples/w-rose_one-set.html +10 -10
package/docs/examples/w-rose_one-set_marginLeft_marginRight_marginTop.html +10 -10
package/docs/examples/w-rose_one-set_roseBorderWidth.html +10 -10
package/docs/examples/w-rose_one-set_roseKpColor(gradient).html +10 -10
package/docs/examples/w-rose_one-set_roseKpColor.html +10 -10
package/docs/examples/w-rose_one-set_roseShowLabels.html +10 -10
package/docs/examples/w-rose_one-set_roseWidthRatio.html +10 -10
package/docs/examples/w-rose_one-set_showLegend.html +10 -10
package/docs/examples/w-rose_one-set_showLegend_legendPosition.html +10 -10
package/docs/examples/w-set-multi_default.html +221 -0
package/docs/examples/w-set-multi_hide labels.html +222 -0
package/docs/examples/w-set-multi_hide legned.html +222 -0
package/docs/examples/w-set-multi_keySelect.html +226 -0
package/docs/examples/w-set-multi_slot head.html +225 -0
package/docs/examples/w-set-multi_textPlotType_kpSelectText_widthSelect.html +233 -0
package/docs/examples/w-set-one_default.html +192 -0
package/docs/examples/w-set-one_hide labels.html +193 -0
package/docs/examples/w-set-one_keySelect.html +197 -0
package/docs/examples/w-set-one_show legned.html +193 -0
package/docs/examples/w-set-one_slot head.html +196 -0
package/docs/examples/w-set-one_textPlotType_kpSelectText_widthSelect.html +201 -0
package/docs/getDefAxis.mjs.html +5 -5
package/docs/getDefChart.mjs.html +3 -3
package/docs/getDefLegend.mjs.html +2 -2
package/docs/getDefOpt.mjs.html +2 -2
package/docs/global.html +2 -2
package/docs/index.html +2 -2
package/docs/module-WBar.html +2 -2
package/docs/module-WPie.html +2 -2
package/docs/module-WPlot.html +2 -2
package/docs/module-WRose.html +2 -2
package/docs/module-WSetMulti.html +216 -0
package/docs/module-WSetOne.html +216 -0
package/docs/setLegendLoc.mjs.html +2 -2
package/package.json +1 -1
package/src/App.vue +224 -20
package/src/AppZoneWBar.vue +50 -9
package/src/AppZoneWPie.vue +4 -4
package/src/AppZoneWRose.vue +9 -9
package/src/AppZoneWSetMulti.vue +225 -0
package/src/AppZoneWSetOne.vue +193 -0
package/src/components/WBar.vue +128 -18
package/src/components/WPie.vue +21 -18
package/src/components/{WGeoVue.vue → WPlotVue.vue} +8 -4
package/src/components/WRose.vue +21 -18
package/src/components/WSetMulti.vue +423 -0
package/src/components/WSetOne.vue +57 -0
package/src/js/genBarOpt.mjs +54 -7
package/src/js/genPieOpt.mjs +1 -1
package/src/js/genRoseOpt.mjs +1 -1
package/src/js/getDefAxis.mjs +3 -3
package/src/js/getDefChart.mjs +1 -1
package/toolg/gDistRollupComps.mjs +1 -1
package/toolg/gMergeComps.mjs +4 -4
package/dist/w-geo-vue.umd.js +0 -7
package/dist/w-geo-vue.umd.js.map +0 -1

package/docs/module-WSetOne.html ADDED Viewed

@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>WSetOne - Documentation</title>
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
+    <script src="scripts/nav.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+<input type="checkbox" id="nav-trigger" class="nav-trigger" />
+<label for="nav-trigger" class="navicon-button x">
+  <div class="navicon"></div>
+</label>
+<label for="nav-trigger" class="overlay"></label>
+<nav >
+    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-WBar.html">WBar</a></li><li><a href="module-WPie.html">WPie</a></li><li><a href="module-WPlot.html">WPlot</a></li><li><a href="module-WRose.html">WRose</a></li><li><a href="module-WSetMulti.html">WSetMulti</a></li><li><a href="module-WSetOne.html">WSetOne</a></li></ul><h3>Global</h3><ul><li><a href="global.html#getDefAxis">getDefAxis</a></li><li><a href="global.html#getDefChart">getDefChart</a></li><li><a href="global.html#getDefLegend">getDefLegend</a></li><li><a href="global.html#getDefOpt">getDefOpt</a></li><li><a href="global.html#setLegendLoc">setLegendLoc</a></li></ul>
+</nav>
+<div id="main">
+    <h1 class="page-title">WSetOne</h1>
+<section>
+<header>
+</header>
+<article>
+        <div class="container-overview">
+<dl class="details">
+    <dt class="tag-description">Description:</dt>
+    <dd class="tag-description"><ul class="dummy"><li></p></div></div>
+<h3 class="subsection-title" style="margin-top: 1em" data-jsdoc-vuejs="section-props">Props</h3>
+<table data-jsdoc-vuejs="table-props">
+    <thead>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Default value</th>
+        <th>Required?</th>
+        <th>Description</th>
+    </tr>
+    </thead>
+    <tbody><tr>
+        <td><code>opt</code></td>
+        <td>Object</td>
+        <td><code>{}</code></td>
+        <td>No</td>
+        <td>輸入設定物件，預設{}</td>
+    </tr></tbody>
+</table>
+<div class="container-overview"><div><p>
+</li></ul></dd>
+</dl>
+                <div class="description usertext"></p></div></div>
+<h3 class="subsection-title" style="margin-top: 1em" data-jsdoc-vuejs="section-props">Props</h3>
+<table data-jsdoc-vuejs="table-props">
+    <thead>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Default value</th>
+        <th>Required?</th>
+        <th>Description</th>
+    </tr>
+    </thead>
+    <tbody><tr>
+        <td><code>opt</code></td>
+        <td>Object</td>
+        <td><code>{}</code></td>
+        <td>No</td>
+        <td>輸入設定物件，預設{}</td>
+    </tr></tbody>
+</table>
+<div class="container-overview"><div><p>
+</div>
+        </div>
+</article>
+</section>
+</div>
+<br class="clear">
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Dec 14 2023 23:32:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+</footer>
+<script>prettyPrint();</script>
+<script src="scripts/polyfill.js"></script>
+<script src="scripts/linenumber.js"></script>
+</body>
+</html>

package/docs/setLegendLoc.mjs.html CHANGED Viewed

@@ -29,7 +29,7 @@
 <nav >
-    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-WBar.html">WBar</a></li><li><a href="module-WPie.html">WPie</a></li><li><a href="module-WPlot.html">WPlot</a></li><li><a href="module-WRose.html">WRose</a></li></ul><h3>Global</h3><ul><li><a href="global.html#getDefAxis">getDefAxis</a></li><li><a href="global.html#getDefChart">getDefChart</a></li><li><a href="global.html#getDefLegend">getDefLegend</a></li><li><a href="global.html#getDefOpt">getDefOpt</a></li><li><a href="global.html#setLegendLoc">setLegendLoc</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-WBar.html">WBar</a></li><li><a href="module-WPie.html">WPie</a></li><li><a href="module-WPlot.html">WPlot</a></li><li><a href="module-WRose.html">WRose</a></li><li><a href="module-WSetMulti.html">WSetMulti</a></li><li><a href="module-WSetOne.html">WSetOne</a></li></ul><h3>Global</h3><ul><li><a href="global.html#getDefAxis">getDefAxis</a></li><li><a href="global.html#getDefChart">getDefChart</a></li><li><a href="global.html#getDefLegend">getDefLegend</a></li><li><a href="global.html#getDefOpt">getDefOpt</a></li><li><a href="global.html#setLegendLoc">setLegendLoc</a></li></ul>
 </nav>
@@ -163,7 +163,7 @@ export default setLegendLoc
 <br class="clear">
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Wed Dec 13 2023 23:13:49 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Dec 14 2023 23:32:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "w-plot-vue",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "dist/w-plot-vue.umd.js",
   "dependencies": {
     "@mdi/js": "^7.2.96",

package/src/App.vue CHANGED Viewed

@@ -1,5 +1,8 @@
 <template>
-    <div style="">
+    <div
+        style=""
+        :changeMenus="changeMenus"
+    >
         <template v-if="!isNarrow">
@@ -10,21 +13,61 @@
         <div style="background:#f5f5f5;">
-            <div style="width:calc( 100vw - 20px ); overflow-x:auto;">
+            <div style="width:calc( 100vw - 20px ); overflow-x:auto;" v-if="cmpsL1">
+                <WListHorizontal
+                    :items="cmpsL1"
+                    :itemActive.sync="cmpP1"
+                    :itemBackgroundColor="'transparent'"
+                    :itemBackgroundColorHover="'transparent'"
+                    :itemBackgroundColorActive="'transparent'"
+                    :keyText="'name'"
+                    @update:itemActive="(v)=>{indP2=0;indP1=getInd(v,cmpsL1)}"
+                >
+                    <template v-slot:item="props">
+                        <div style="">
+                            {{kebabCase(props.item.name)}}
+                        </div>
+                    </template>
+                </WListHorizontal>
+            </div>
+            <div style="width:calc( 100vw - 20px ); overflow-x:auto;" v-if="cmpsL2">
                 <WListHorizontal
-                    :items="cmps"
-                    :itemActive.sync="cmpPick"
+                    :items="cmpsL2"
+                    :itemActive.sync="cmpP2"
                     :itemBackgroundColor="'transparent'"
                     :itemBackgroundColorHover="'transparent'"
                     :itemBackgroundColorActive="'transparent'"
+                    :keyText="'name'"
+                    @update:itemActive="(v)=>{indP2=getInd(v,cmpsL2)}"
                 >
                     <template v-slot:item="props">
-                        <div style="display:flex; align-items:center;">
-                            {{kebabCase(props.item)}}
+                        <div style="">
+                            {{kebabCase(props.item.name)}}
                         </div>
                     </template>
                 </WListHorizontal>
             </div>
+            <div style="width:calc( 100vw - 20px ); overflow-x:auto;" v-if="cmpsL3">
+                <WListHorizontal
+                    :items="cmpsL3"
+                    :itemActive.sync="cmpP3"
+                    :itemBackgroundColor="'transparent'"
+                    :itemBackgroundColorHover="'transparent'"
+                    :itemBackgroundColorActive="'transparent'"
+                    :keyText="'name'"
+                    @update:itemActive="(v)=>{indP3=getInd(v,cmpsL3)}"
+                >
+                    <template v-slot:item="props">
+                        <div style="">
+                            {{kebabCase(props.item.name)}}
+                        </div>
+                    </template>
+                </WListHorizontal>
+            </div>
         </div>
@@ -38,6 +81,10 @@
             <AppZoneWRose v-if="cmpPick==='WRose'"></AppZoneWRose>
+            <AppZoneWSetOne v-if="cmpPick==='WSetOne'"></AppZoneWSetOne>
+            <AppZoneWSetMulti v-if="cmpPick==='WSetMulti'"></AppZoneWSetMulti>
         </div>
@@ -45,16 +92,18 @@
 </template>
 <script>
-// import { mdiCheckCircle, mdiCheckboxBlankCircleOutline } from '@mdi/js'
-// import get from 'lodash-es/get'
+import get from 'lodash-es/get'
 import kebabCase from 'lodash-es/kebabCase'
-// import each from 'lodash-es/each'
-// import urlParse from 'wsemi/src/urlParse.mjs'
+import each from 'lodash-es/each'
+// import cloneDeep from 'lodash-es/cloneDeep'
+import urlParse from 'wsemi/src/urlParse.mjs'
 import WListHorizontal from 'w-component-vue/src/components/WListHorizontal.vue'
 import AppZoneWPlot from './AppZoneWPlot.vue'
 import AppZoneWBar from './AppZoneWBar.vue'
 import AppZoneWPie from './AppZoneWPie.vue'
 import AppZoneWRose from './AppZoneWRose.vue'
+import AppZoneWSetOne from './AppZoneWSetOne.vue'
+import AppZoneWSetMulti from './AppZoneWSetMulti.vue'
 export default {
@@ -64,37 +113,192 @@ export default {
         AppZoneWBar,
         AppZoneWPie,
         AppZoneWRose,
+        AppZoneWSetOne,
+        AppZoneWSetMulti,
     },
     data: function() {
+        let cmps = [
+            {
+                name: 'basic',
+                cmps: [
+                    { name: 'WPlot', },
+                    { name: 'WBar', },
+                    { name: 'WPie', },
+                    { name: 'WRose', },
+                ],
+            },
+            {
+                name: 'set',
+                cmps: [
+                    { name: 'WSetOne', },
+                    { name: 'WSetMulti', },
+                    // {
+                    //     name: 'VTest',
+                    //     cmps: [
+                    //         { name: 'VTest1', },
+                    //         { name: 'VTest2', },
+                    //         { name: 'VTest3', },
+                    //     ],
+                    // },
+                ],
+            },
+        ]
         return {
-            // get,
             kebabCase,
-            // mdiCheckCircle,
-            // mdiCheckboxBlankCircleOutline,
+            cmpsL1: cmps,
+            indP1: null,
+            cmpP1: null,
+            cmpsL2: null,
+            indP2: null,
+            cmpP2: null,
-            cmps: [
-                'WPlot',
-                'WBar',
-                'WPie',
-                'WRose',
-            ],
+            cmpsL3: null,
+            indP3: null,
+            cmpP3: null,
-            cmpPick: 'WPlot',
+            cmpsL4: null,
+            cmpPick: '',
         }
     },
     mounted: function() {
         let vo = this
+        //default
+        vo.indP1 = 0
+        vo.indP2 = 0
+        vo.indP3 = 0
+        //urlParse, http://localhost:8080/?cmp=w-pie
+        let p = urlParse(location.href)
+        // console.log('p', p)
+        //viewPick
+        vo.viewPick(get(p, 'cmp', ''))
     },
     computed: {
+        changeMenus: function() {
+            let vo = this
+            vo.modifyMenus(vo.indP1, vo.indP2, vo.indP3)
+            return ''
+        },
         isNarrow: function() {
             return window.innerWidth < 1000
         },
     },
     methods: {
+        modifyMenus: function() {
+            let vo = this
+            let cmpPick = ''
+            setTimeout(() => {
+                // console.log('call P1')
+                vo.cmpP1 = get(vo.cmpsL1, vo.indP1, {})
+                vo.cmpsL2 = get(vo.cmpP1, `cmps`, [])
+                let _cmpPick = get(vo.cmpP1, `name`, '')
+                if (_cmpPick) {
+                    cmpPick = _cmpPick
+                }
+                // console.log('vo.cmpP1', cloneDeep(vo.cmpP1))
+                // console.log('vo.cmpsL2', cloneDeep(vo.cmpsL2))
+            }, 50)
+            setTimeout(() => {
+                // console.log('call P2')
+                let cmps = get(vo.cmpP1, `cmps`, [])
+                vo.cmpP2 = get(cmps, vo.indP2, {})
+                vo.cmpsL3 = get(vo.cmpP2, `cmps`, [])
+                let _cmpPick = get(vo.cmpP2, `name`, '')
+                if (_cmpPick) {
+                    cmpPick = _cmpPick
+                }
+                // console.log('vo.cmpP2', cloneDeep(vo.cmpP2))
+                // console.log('vo.cmpsL3', cloneDeep(vo.cmpsL3))
+            }, 100)
+            setTimeout(() => {
+                // console.log('call P3')
+                let cmps = get(vo.cmpP2, `cmps`, [])
+                vo.cmpP3 = get(cmps, vo.indP3, {})
+                vo.cmpsL4 = get(vo.cmpP3, `cmps`, [])
+                let _cmpPick = get(vo.cmpP3, `name`, '')
+                if (_cmpPick) {
+                    cmpPick = _cmpPick
+                }
+                // console.log('vo.cmpP3', cloneDeep(vo.cmpP3))
+                // console.log('vo.cmpsL4', cloneDeep(vo.cmpsL4))
+                //update
+                vo.cmpPick = cmpPick
+                // console.log('cmpPick', cmpPick)
+            }, 150)
+        },
+        getInd: function(item, items) {
+            // let vo = this
+            let ind = -1
+            each(items, (v, k) => {
+                if (item.name === v.name) {
+                    ind = k
+                    return false //跳出
+                }
+            })
+            return ind
+        },
+        viewPick: function(cmpPick) {
+            let vo = this
+            let _cmpPick = kebabCase(cmpPick)
+            let r = ''
+            let rs = []
+            let ls = []
+            let l = 0
+            let pv = (ts) => {
+                each(ts, (v, k) => {
+                    let name = get(v, `name`, '')
+                    let _name = kebabCase(name)
+                    let cmps = get(v, `cmps`, [])
+                    if (cmps.length > 0) {
+                        ls.push(l)
+                        l++
+                        pv(cmps)
+                        l--
+                        ls.pop()
+                    }
+                    let lst = [...ls, k]
+                    rs.push({
+                        clst: lst.join('.'),
+                        name,
+                    })
+                    if (_name === _cmpPick) {
+                        r = lst
+                    }
+                })
+            }
+            pv(vo.cmpsL1)
+            // console.log('rs', rs)
+            // console.log('r', r)
+            vo.indP1 = get(r, 0, 0)
+            vo.indP2 = get(r, 1, 0)
+            vo.indP3 = get(r, 2, 0)
+        },
     },
 }
 </script>

package/src/AppZoneWBar.vue CHANGED Viewed

@@ -569,6 +569,25 @@
             </div>
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & one-set & barUseInnerLabelsForHorizontal'"
+                ></demolink>
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barUseInnerLabelsForHorizontal:true,
+                    }"
+                ></w-bar>
+            </div>
             <div class="bk">
                 <demolink
                     :kbname="'w-bar'"
@@ -815,6 +834,28 @@
             </div>
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & multi-set & barUseInnerLabelsForHorizontal & barGroupWidthRatio'"
+                ></demolink>
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barShowLabels:false,
+                        showLegend:true,
+                        barUseInnerLabelsForHorizontal:true,
+                        barGroupWidthRatio:0.25,
+                    }"
+                ></w-bar>
+            </div>
             <div class="bk">
                 <demolink
                     :kbname="'w-bar'"
@@ -1153,7 +1194,7 @@ export default {
     props: {
     },
     data: function() {
-        let keys1 = ['USA', 'China', 'Brazil', 'EU', 'India', 'Russia']
+        let keys = ['USA', 'China', 'Brazil', 'EU', 'India', 'Russia']
         let rds1a = [
             {
                 name: 'Corn',
@@ -1381,7 +1422,7 @@ export default {
                 'opt1a': {
                     width: 400,
                     height: 400,
-                    keys: keys1,
+                    keys,
                     rds: rds1a,
                     xTitle: 'Countries',
                     yTitle: 'Weight (MT)',
@@ -1389,7 +1430,7 @@ export default {
                 'opt1b': {
                     width: 400,
                     height: 400,
-                    keys: keys1,
+                    keys,
                     rds: rds1b,
                     xTitle: 'Countries',
                     yTitle: 'Weight (MT)',
@@ -1397,7 +1438,7 @@ export default {
                 'opt1c': {
                     width: 400,
                     height: 400,
-                    keys: keys1,
+                    keys,
                     rds: rds1c,
                     xTitle: 'Countries',
                     yTitle: 'Weight (MT)',
@@ -1405,7 +1446,7 @@ export default {
                 'opt2a': {
                     width: 400,
                     height: 400,
-                    keys: keys1,
+                    keys,
                     rds: rds2a,
                     xTitle: 'Countries',
                     yTitle: 'Weight (MT)',
@@ -1413,7 +1454,7 @@ export default {
                 'opt2b': {
                     width: 400,
                     height: 400,
-                    keys: keys1,
+                    keys,
                     rds: rds2b,
                     xTitle: 'Countries',
                     yTitle: 'Weight (MT)',
@@ -1421,7 +1462,7 @@ export default {
                 'opt2c': {
                     width: 400,
                     height: 400,
-                    keys: keys1,
+                    keys,
                     rds: rds2c,
                     xTitle: 'Countries',
                     yTitle: 'Weight (MT)',
@@ -1429,7 +1470,7 @@ export default {
                 'opt2d': {
                     width: 400,
                     height: 400,
-                    keys: keys1,
+                    keys,
                     rds: rds2d,
                     xTitle: 'Countries',
                     yTitle: 'Weight (MT)',
@@ -1437,7 +1478,7 @@ export default {
                 'opt2e': {
                     width: 400,
                     height: 400,
-                    keys: keys1,
+                    keys,
                     rds: rds2e,
                     xTitle: 'Countries',
                     yTitle: 'Weight (MT)',