City Dashboard Component

Requirements

This component was designed for Vue version 3 or above. Please install via npm version 20 or above.

Installation

1. Install the package via npm.

npm i city-dashboard-component

2. Import the stylesheet to main.js.

import "city-dashboard-component/style.css";

3. Import the component globally or locally in any Vue component.

import { DashboardComponent } from "city-dashboard-component";

// If global
app.component("DashboardComponent", DashboardComponent);

Modes

• Default: The default form of this component with a chart in the middle.
• Large: Slightly larger height than default mode.
• Half: Half the height of default mode.
• Map: Adds a toggle and collapse mode.
• HalfMap: Half the height of map mode when expanded.
• Preview: No chart in the middle but only descriptions.

Props

This component follows the configuration of Taipei City Dashboard. Please refer to its documentation for more information.

|Prop|Type|Default|Description| |----|----|-------|-----------| |config|Object<ComponentConfig>|None. Required.|Component Config. Refer to Taipei City Dashboard's docs for the complete list of parameters available.| |mode|Enum|"default"|Must be one of "default", "large", "map", "half", "halfmap", "preview"| |favoriteBtn|Boolean|false|Whether to show a favorite button| |isFavorite|Boolean|false|Whether the component is liked| |deleteBtn|Boolean|false|Whether to show a delete button| |addBtn|Boolean|false|Whether to show an add button| |infoBtn|Boolean|false|Whether to show an info button| |infoBtnText|String|"組件資訊"|The text of the info button| |toggleDisable|Boolean|false|Whether to disable the toggle in map mode| |footer|Boolean|true|Whether to show the footer| |style|Object|{}|Override the wrapper styles of the component|

Events

This component follows the configuration of Taipei City Dashboard. Please refer to its documentation for more information.

|Event|Required Props|Fired When|Parameters| |-----|--------------|----------|----------| |favorite|favoriteBtn|The favorite button is clicked|id<Number>| |delete|deleteBtn|The delete button is clicked|id<Number>| |add|addBtn|The add button is clicked|id<Number>| |info|infoBtn|The info button is clicked|config<ComponentConfig>| |toggle|mode<"map", "halfmap">|The toggle button is clicked|value<Boolean>, map_config<MapConfig[]>| |filterByParam|mode<"map", "halfmap">, config has map filter in param mode|When the chart is clicked and no filter is present.|map_filter<MapFilter>, map_config<MapConfig[]>, x<string or null>, y<string or null>| |filterByLayer|mode<"map", "halfmap">, config has map filter in layer mode|When the chart is clicked and no filter is present.|map_config<MapConfig[]>, x<string or null>| |clearByParamFilter|mode<"map", "halfmap">, config has map filter in param mode|When the chart is clicked and a filter is present.|map_config<MapConfig[]>| |clearByLayerFilter|mode<"map", "halfmap">, config has map filter in layer mode|When the chart is clicked and a filter is present.|map_config<MapConfig[]>| |fly|mode<"map", "halfmap">, config specifies DistrictChart|When the chart is clicked.|location<{lng, lat}>|

Example

<script setup>
import { ref } from "vue"
import { DashboardComponent } from "city-dashboard-component"

const config = {...} // Please refer to Taipei City Dashboard Docs
const isFavorite = ref(false);

function showMoreInfo(config) {
  // a function to open a dialog to show more info about the component
}
</script>

<template>
  <DashboardComponent
      mode="default"
      :config="config"
      :info-btn="true"
      :favorite-btn="true"
      :is-favorite="isFavorite"
      @favorite="
        (id) => {
          console.log(id);
          isFavorite = !isFavorite
        }
      "
      @info="
        (config) => {
          showMoreInfo(config);
        }
      "
  />
</template>

For more examples, please refer to Taipei City Dashboard or its GitHub repository.

© 2023-2024 Igor Ho, One Premium Ltd.