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.