harana / scalajs-react-sparkline

Scala.js facade for the react-sparklines library.

GitHub

scalajs-react-sparkline

Build Status Maven Central Scala.js

Scala.js facade for the dataui-sparkline library.

Setup

SBT

Add these dependencies to your build file:

libraryDependencies ++= Seq(
  "com.github.japgolly.scalajs-react" %%% "core" % "1.2.3",
  "com.github.japgolly.scalajs-react" %%% "extra" % "1.2.3",
  "com.harana" %%% "scalajs-react-sparkline" % "1.1.0"
)

The artifacts are published to Sonatype so ensure you have it included:

resolvers += Resolver.sonatypeRepo("releases")

Usage

Examples:

Sparkline(height = 100, width = 500, ariaLabel = "", data = data, margin = Margin(24, 64, 24, 64))(
  PatternLines(id = "pattern1", height = 2, width = 2, stroke = "#ffd8a8", strokeWidth = 2, orientation = "diagonal"),
  LineSeries(fill = "url(#pattern1)", showArea = true, stroke = "black"),
  PointSeries(fill = "black", size = 3)
),
Sparkline(height = 100, width = 500, ariaLabel = "", data = data)(
  PointSeries(size = 3, renderLabel = renderLabel),
  PatternLines(id = "pattern2", height = 4, width = 4, stroke = "#da77f2", strokeWidth = 1, orientation = "diagonal"),
  BandLine(band = "innerquartiles", fill="url(#pattern2)")
),
Sparkline(height = 100, width = 500, ariaLabel = " ", data = data, valueAccessor=accessor)(
  LinearGradient(id = "pattern3", from = "#fff3bf", to = "##f08c00"),
  HorizontalReferenceLine(stroke = "#5c7cfa", strokeWidth = 1, strokeDasharray = "1 1", reference = "median"),
  BarSeries(fill = "url(#pattern3)"),
)

Demo

This will start a web server on http://localhost:8080:

sbt 
fastOptJS::webpack
demo/compile:fastOptJS::startWebpackDevServer

License

BSD 3

Harana

Harana is an AI-powered data catalog.

It automatically imports metadata from all your favourite tools: Confluence, AWS Glue, Kafka, PostgreSQL, MySQL, Oracle, SQL Server, IBM DB2, SQLite, Hive, CouchDB, MongoDB, HBase, Cassandra, ElasticSearch, DynamoDB, Salesforce, SugarCRM, Excel, CSV, XML, JSON.