diff --git a/src/common/exampleCatalogUtils.js b/src/common/exampleCatalogUtils.js new file mode 100644 index 00000000..676a95a4 --- /dev/null +++ b/src/common/exampleCatalogUtils.js @@ -0,0 +1,143 @@ +import LazyLoad from 'vanilla-lazyload/dist/lazyload.esm'; +import { EXAMPLE_CATEGORIES, BLACK_MAP } from './config'; + +const icons = {}; +[ + 'line', + 'bar', + 'scatter', + 'pie', + 'radar', + 'funnel', + 'gauge', + 'map', + 'graph', + 'treemap', + 'parallel', + 'sankey', + 'candlestick', + 'boxplot', + 'heatmap', + 'pictorialBar', + 'themeRiver', + 'calendar', + 'matrix', + 'chord', + 'custom', + 'sunburst', + 'tree', + 'dataset', + 'geo', + 'lines', + 'dataZoom', + 'rich', + 'graphic' +].forEach(function (category) { + icons[category] = require('../asset/icon/' + category + '.svg'); +}); + +const glIcon = require('../asset/icon/gl.svg'); +[ + 'globe', + 'bar3D', + 'scatter3D', + 'surface', + 'map3D', + 'lines3D', + 'line3D', + 'scatterGL', + 'linesGL', + 'flowGL', + 'graphGL', + 'geo3D' +].forEach(function (category) { + icons[category] = glIcon; +}); + +function defaultErrorCallback(img) { + const fallbackSrc = img.src; + const children = img.parentElement.children; + for (let i = 0, len = children.length; i < len; i++) { + const el = children[i]; + if (el !== img) { + el.srcset = fallbackSrc; + } + } +} + +export function createLazyLoader(options = {}) { + return new LazyLoad({ + // Container should be the scroll viewport. + // container: this.$el.querySelector('#explore-container .example-list-panel') + elements_selector: '.chart-area', + load_delay: 400, + class_loaded: 'ec-shot-loaded', + callback_error: defaultErrorCallback, + ...options + }); +} + +function buildExampleListByCategory(chartList, chartListGL) { + const exampleListByCategory = {}; + + function addExamples(list, isGL) { + let categoryOrder = 0; + + do { + let added = false; + for (let i = 0; i < list.length; i++) { + const example = list[i]; + if (BLACK_MAP.hasOwnProperty(example.id)) { + continue; + } + if (example.noExplore) { + continue; + } + if (typeof example.category === 'string') { + example.category = [example.category]; + } + + const categoryStr = (example.category || [])[categoryOrder]; + if (categoryStr) { + added = true; + let categoryObj = exampleListByCategory[categoryStr]; + if (!categoryObj) { + categoryObj = { + category: categoryStr, + examples: [] + }; + exampleListByCategory[categoryStr] = categoryObj; + } + example.isGL = isGL; + categoryObj.examples.push(example); + } + } + + if (!added) { + break; + } + } while (++categoryOrder && categoryOrder < 4); + } + + addExamples(chartList, false); + addExamples(chartListGL, true); + + return exampleListByCategory; +} + +function createExampleList(exampleListByCategory) { + const list = []; + for (let i = 0, len = EXAMPLE_CATEGORIES.length; i < len; i++) { + const category = EXAMPLE_CATEGORIES[i]; + const categoryObj = exampleListByCategory[category]; + if (categoryObj && categoryObj.examples.length > 0) { + list.push({ + category, + examples: categoryObj.examples + }); + } + } + return list; +} + +export { icons, buildExampleListByCategory, createExampleList }; diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue index cc627b9d..b7892801 100644 --- a/src/editor/Editor.vue +++ b/src/editor/Editor.vue @@ -1,417 +1,435 @@ + + diff --git a/src/explore/ExampleCard.vue b/src/explore/ExampleCard.vue index e5e1797b..fa8ec567 100644 --- a/src/explore/ExampleCard.vue +++ b/src/explore/ExampleCard.vue @@ -1,23 +1,28 @@ @@ -27,7 +32,13 @@ import { store } from '../common/store'; import { URL_PARAMS } from '../common/config'; export default { - props: ['example'], + props: { + example: Object, + embedded: { + type: Boolean, + default: false + } + }, computed: { title() { @@ -89,6 +100,16 @@ export default { screenshotURLPNG() { return `${store.cdnRoot}/${this.exampleThumbFilePath}.png?_v_=${store.version}`; } + }, + + methods: { + onLinkClick(event) { + if (!this.embedded) { + return; + } + event.preventDefault(); + this.$emit('select-example', this.example); + } } }; @@ -103,21 +124,27 @@ export default { position: relative; .example-link { - margin-top: 10px; - border-radius: 5px; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); - overflow: hidden; - display: block; - } + text-decoration: none; - .chart-area { - width: 100%; - height: 100%; - cursor: pointer; - transition: 0.3s ease-in-out; + &-image { + margin-top: 10px; + border-radius: 5px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); + overflow: hidden; + display: block; + + .chart-area { + width: 100%; + height: 100%; + cursor: pointer; + transition: 0.3s ease-in-out; + } + } &:hover { - transform: scale(1.2); + .chart-area { + transform: scale(1.2); + } } } diff --git a/src/explore/Explore.vue b/src/explore/Explore.vue index b3a21ef3..5eeb3175 100644 --- a/src/explore/Explore.vue +++ b/src/explore/Explore.vue @@ -68,66 +68,15 @@