Clockface
A React + Typescript UI Kit for building Chronograf and other Time Series visualization applications.
Documentation: https://influxdata.github.io/clockface
Patterns
Component Families
Components with sub-components are sub-classed to improve readablity of code and ease of use.
Family parent is the only component in the family to import a stylesheet and all styles are namespaced accordingly.
Style namespacing is largely based on BEM.
Example:
import {Garden} from '@influxdata/clockface'
<Garden> // Family Parent
<Garden.Fence />
<Garden.PlanterBox />
</Garden>
You can tell these are all related because of the Garden
family namespace
.garden {
display: flex;
}
.garden--fence {
color: white;
}
.garden--planter-box {
flex: 1 0 50%;
}
Common Prop Types
Clockface offers a variety of Types to make customizing the UI kit simple. For example, any component that can be rendered in different colors takes the ComponentColor
type. Use of these common prop types throughout the UI kit ensures consistency.