Git Product home page Git Product logo

px-vis-parallel-coordinates's Introduction

px-vis-parallel-coordinates

Overview

Px-vis-parallel-coordinates is a Predix UI component that allows you to draw a parallel coordinates (aka parallel axes) chart.

Usage

Prerequisites

  1. node.js
  2. npm
  3. bower
  4. webcomponents-lite.js polyfill

Node, npm, and bower are necessary to install the component and dependencies. webcomponents.js adds support for web components and custom elements to your application.

Getting Started

First, install the component via bower on the command line:

bower install px-vis-parallel-coordinates --save

Second, import the component in your application with the following tag in your head:

<link rel="import" href="/bower_components/Px-Vis-Parallel-Coordinates/px-vis-parallel-coordinates.html"/>

Finally, use the component in your application:

See demo page for example usage.


Documentation

Read the full API and view the demo here.

The documentation in this repository is supplemental to the official Predix documentation, which is continuously updated and maintained by the Predix documentation team. Go to http://predix.io to see the official Predix documentation.

Local Development

From the component's directory...

$ npm install
$ bower install
$ gulp sass

From the component's directory, to start a local server run:

$ gulp serve

Navigate to the root of that server (e.g. http://localhost:8080/) in a browser to open the API documentation page, with link to the "Demo" / working examples.

GE Coding Style Guide

GE JS Developer's Guide



Known Issues

Please use Github Issues to submit any bugs you might find.

px-vis-parallel-coordinates's People

Contributors

benoitjchevalier avatar davidrleonard avatar evanjd avatar jimdefrisco avatar katemenkhaus avatar mdwragg avatar nonmetalhail avatar randyaskin avatar talimarcus avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

px-vis-parallel-coordinates's Issues

Tooltip

Explore tooltip integration options:

  1. when under x series, we can use svg and then put a tooltip listener on each line; when over x series, no tooltip.
  2. Use interaction space to get "closest" line to the cursor. Interaction space would have to go UNDER the axis drawing space to allow for axis drag and brush capabilities.

tooltip should display either point on the line at axis closest to the cursor or all axes values for that line

Need to see if either method is feasible performance and interaction wise.

enable multiple categories

We need to support multiple categories (assets) where each set of lines get a different color based on category.

px-vis-navigator integration

The series in the PC chart should be based on the extents chosen on the navigator.

  1. make sure the lines respond to changes to the navigator selectedDomain
  2. upgrade px-vis-brush used in the navigator: brush rect.overlay need to have a gradient from 20%-100%. (this gradient will then match the gradient given to the lines)

Add register (and mute / unmute)

Need to add an optional register. It just needs to display the axis names, not any values. You should be able to mute an axis via the register and it will remove the corresponding axis from the chart. Unmuteing the axis via the register will then return it to the chart.

Get ordered axes

Can use $chart.dimensions.

Either document this or create a return function to get it. Check with Jum that muting / unmuting should still be in the list.

With commonAxis, dragging axis doesnt update axis style

If we have a commonAxis, the text on the first axis is visible, the others have an on-hover functionality. If I drag the first axis to the middle, the styles do not update.

The problem is that the order on the dom is still the same, so it believes it to still be the first axis. Need to look into how to get the ordinal drawn order...

See px-vis-multi-axis for code

Axis Label rotation

Need to calc a conservative width / axis, if we have too many axes, then rotate the label 90 degrees per spec.

Support common axis

Dev should be able to specify if the chart draws using max data extents or (current behavior) individual extents for each axis.

Per spec, the axes values labels will be hidden; on axis hover, they should appear and be grey

Does not need to be dynamic, but would be a big plus.

Add Chart Extents functionality

Hi,
We tried passing chart-extents="{"x": [0,100],"y": [5,50]}" in the px-vis-parallel-coordinates, however we are not able to see any changes in the output. Could you please confirm whether this functionality will work in this component?

Also, confirm is it "dynaimc" or "dynamic"? as per specification it is like below.
chartExtents
Object notifies
Developer set chart extents for the chart. The chart will draw to whatever values are specified in the chartExtents.

{
"x": [0,100],
"y": [5,50],
}
To force the chart to calculate based on data, use "dynamic".

{
"x": [0,"dynaimc"],
"y": [-10,"dynaimc"],
}
For an ordinal dataset, chart extents can be set like this:

{
"x": ['low','medium','high'],
"y": [5,50],
}

Colorset

Need use the dark color set. Probably easiest to just add n to the colorseriesorder getter to start at the dark colorset.

Need to also add 20-100% opacity based on time

Experiment with progressive rendering

Experiment with progressive rendering and see if we can get it to work well.

Current stub takes too long as it only draws 1 line every "1ms". Should try to make it draw larger sets of data over a timeframe.

Also look into making not do that for the first render, but only for subsequent renders.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.