influxdata / clockface Goto Github PK
View Code? Open in Web Editor NEWUI Kit for building Chronograf
Home Page: https://influxdata.github.io/clockface
License: MIT License
UI Kit for building Chronograf
Home Page: https://influxdata.github.io/clockface
License: MIT License
Not essential, but would be useful down the line to expose this
Bring over Select List component that is used in the query builder and input/output bucket overlay
ClassNames passed to ComponentSpacer aren't applied to the rendered element.
When using a dropdown that is showing an icon rather than text, it doesnt look any different when disabled. There seems to be no indication that it is disabled other than when clicking on it the dropdown menu doesnt appear.
In the below screenshot, the autorefresh dropdown with the pause is disabled but the timerange dropdown is not.
Rather than the current implementation we can use the react-spring
library to handle this much more gracefully. https://www.react-spring.io/docs/hooks/use-transition
I tested this briefly in a branch and it works really nicely
Some refactoring might be needed in order to make these components work outside of InfluxDB
I think this is a webpack thing
Will be needed to use Page
components on the Dashboard page
is throwing off layout of children
Remove DropdownMenuColors to use defined Gradients instead.
This is making InfluxDB snapshot tests and the react inspector tougher to use
EmptyStateText highlightedWords should respect spaces in original text string.
Some components use customClass
and some use className
className
is the desired standard
Instead of having to use <span className="icon checkmark" />
(for example) we can standardize this via single component. This will ensure that all icons use a <span/>
tag and offers other consistency benefits.
This will also help with having Clockface be the only source of the icon font
Should work similarly to the backgroundColor
prop in Panel
except the default is undefined
Now that we have more components we could do some housekeeping.
The way https://react.semantic-ui.com/ organizes their UI kit is pretty nice
Proposed organization:
Types (Docs for all the types we have)
Colors
???
Elements (simplest components)
Button
Icon
SlideToggle
Label
Modules (comprised of multiple Clockface components)
Input
TextArea
Alert
ColorPicker
TechnoSpinner (Includes SpinnerContainer)
SparkleSpinner (Includes SpinnerContainer)
Families (a set of components intended to be used together)
Form
Panel
Radio
EmptyState
Dropdown
Page Layout (navigation & page components)
Nav + Page Layout
Nav + Full-Width Page Layout
Utilities (helps achieve layout or functionality goals)
ClickOutside
ComponentSpacer
Grid
DapperScrollbars
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.