data-blocks

React based UI Component Library for big data handling, interactions, presentation and visualisation.

Link to Package Docs

Currently a work in progress - Sept, 2022

Authors

Andy Clarke - Data Scientist & Engineer @ UBDC

License

MIT

Installation

To install this package in your React Project directly from the npm registry.

npm i @urbanbigdatacentre/data-blocks

Check it out on npm here.

Components

Currently a work in progress - Aug, 2022

Cookies Banner

A customizable floating cookies banner sitting at the bottom of pages to control a user's cookie preferences.

Includes a basic description of cookie use and buttons to handle accept / reject behaviour.

Usage

Import the component

import {CookiesBanner} from '@urbanbigdatacentre/data-blocks'

• Required color prop: <string>
• Optional theme prop : Mui Design Theme <any>

<CookiesBanner color={"#219FF3"}/>

Date Range Picker

Two date pickers combined to provide a start date and end date picker. Allows for external state mgmt and dispatch actions.

Usage

Import the component

import {DateRangePicker} from '@urbanbigdatacentre/data-blocks'

All the following props are optional

• theme: Mui Design Theme <any>
• startLabelText: Label to go above start date text field <string>
• endLabelText: Label to go above end date text field <string>
• externalStateStartDate : External start date obj. Designed for Redux state mgmt <Dayjs | Date>
• externalStateStartDate : External end date obj. Designed for Redux state mgmt <Dayjs | Date>
• externalStateSetStartDateDispatch: Dispatch function to handle external start date state change. Designed for Redux state mgmt. <any>
• externalStateSetEndDateDispatch: Dispatch function to handle external end date state change. Designed for Redux state mgmt. <any>

// Example Usage

<DateRangePicker
    theme={myMuiDesignTheme}
    startLabelText={"Check In"}
    endLabelText={"Check Out"}
    externalStateStartDate={myReduxStore.startDate}
    externalStateEndDate={myReduxStore.endDate}
    externalStateSetStartDateDispatch={dispatchEvent}
    externalStateSetEndDateDispatch={dispatchEvent}
/>

New Package Releases

This package uses Github Actions to automatically publish to the npm registry once a new release has been made on Github.

To make a new release ...

Update the version inside package.json

  {
    "version": "0.0.3"
  }

Run rollup locally

  npm run rollup

Add all changes to Github repo

  git add .

Commit all changes for new version

  git commit -m Added Cookies Banner - v.0.0.3

Push changes to remote origin

  git push origin main

Draft and Publish new release in Github data-blocks repo

Github Actions will automatically create a pipeline to publish the new version to the npm registry.

Follow the changes inside this repo's Actions tab.