dpc-sdp / myvic-components Goto Github PK

• About the Project
• Component Overview
• Installation
• Usage
• Component Listing
• Deployment
• Data Hosting
• Contributing
• Support
• License
• Attribution

The My Victoria component library aims to enable the publication of accessible maps, charts and user interface (UI) elements to websites by content owners across Government. It includes a set of reusable UI components designed to integrate with DDI’s existing ecosystem of platforms and services; and supporting documentation and examples to assist with their usage.

All components have been designed to align to Victorian Government design standards and branding; and include features to improve their accessibility.

For a higher level overview of how to get started, see the Getting Started Guide

All components have been developed with Vue as part of the MyVic-Components repository and aligned to the existing Ripple component library. Components are published to NPM, ready to be used directly in any Vue JS application.

Vue CLI is recommended for bootstrapping a new standalone Vue JS application.

Ripple includes example Vue JS and Nuxt sites that can be used to bootstrap a web application for deployment to SDP.

Storybook examples with component documentation are available here

Installation is straightforward with NPM or Yarn. See the component listing for all available packages.

npm install @dpc-sdp/myvic-bar-chart --save

or

yarn add @dpc-sdp/myvic-bar-chart

All components are published to NPM as individual packages under the @dpc-sdp namespace, with a myvic- prefix. For example:

• @dpc-sdp/myvic-map-core
• @dpc-sdp/myvic-bar-chart

Components are intended to be used with Vue.js projects, and can be installed with NPM as follows:

npm install @dpc-sdp/myvic-map-core --save

And imported using ES6 style imports:

import { MyvicMapCore } from '@dpc-sdp/myvic-map-core'

Or using require as follows:

const MyvicMapCore = require("@dpc-sdp/myvic-map-core")

Or imported directly into an HTML page (see the UMD Bundle documentation for more information:

<script src="https://cdn.jsdelivr.net/npm/@dpc-sdp/myvic-bundle@dev/dist/myvic-bundle.js"></script>

A component for displaying an autocomplete search with results. This component renders a text input that allows searching over a set of items. The filtered results will appear beneath the input as a selectable list.

• @dpc-sdp/myvic-autocomplete
• Storybook Documentation

A component for looking up addresses in Victoria using an autocomplete search.

• @dpc-sdp/myvic-addresssearch
• Storybook Documentation

A component for looking up different kinds of areas using an autocomplete search.

• @dpc-sdp/myvic-areasearch
• Storybook Documentation

A component for displaying a data-driven bar chart.

• @dpc-sdp/myvic-bar-chart
• Storybook Documentation

A component for displaying a data-driven line chart.

• @dpc-sdp/myvic-line-chart
• Storybook Documentation

A component for displaying a data-driven pie chart.

• @dpc-sdp/myvic-pie-chart
• Storybook Documentation

A component for displaying a data-driven tree map.

• @dpc-sdp/myvic-treemap
• Storybook Documentation

A component for displaying a single data item as a block element.

• @dpc-sdp/myvic-data-block
• Storybook Documentation

A component for displaying a dynamic list of toggleable items.

• @dpc-sdp/myvic-toggle-list
• Storybook Documentation

An interactive map component based on OpenLayers.

• @dpc-sdp/myvic-map-core
• Storybook Documentation

A component that provides support for OSM, XYZ, WMS and ArcGIS tiled map layers.

• @dpc-sdp/myvic-map-core
• Storybook Documentation

A component that provides support for vector sources such as WFS, ArcGIS Feature Server and GeoJSON files.

• @dpc-sdp/myvic-map-core
• Storybook Documentation

A component that provides support for Mapbox Vector Tile sources.

• @dpc-sdp/myvic-map-core
• Storybook Documentation

Shared styles, libraries and utility functions for use across MyVictoria components.

• @dpc-sdp/myvic-global

Examples showing how multiple components can be bundled together and interact with each other.

• @dpc-sdp/myvic-examples
• Storybook Documentation

A bundle of MyVictoria components packaged as a UMD. Mainly intended for use in existing HTML sites that are not already using Vue or Webpack.

• @dpc-sdp/myvic-bundle

Users of the My Victoria components are responsible for arranging their own web hosting. Some possible options include:

• A Standalone Vue or Nuxt app can be self hosted on any standard web server.
• Existing SDP Sites may be able to use the components via Drupal and Data Driven Component
• A New SDP Site
• Non Vue.js site using the UMD bundle

The My Victoria components don't have any specific requirements for data hosting, other than that the data is online and can be parsed with JavaScript. If hosting is required, some existing options include:

• MyVictoria (using Geoserver for hosting geospatial web services)
• Data.Vic
• API Gateway

Check our CONTRIBUTING.md

Digital Engagement, Department of Premier and Cabinet, Victoria, Australia is a maintainer of this package.

Distributed under the Apache 2.0 License. See LICENSE for more information.

Single Digital Presence offers government agencies an open and flexible toolkit to build websites quickly and cost-effectively.