Giter Club home page Giter Club logo

znd-graph's Introduction

Graph component for znasichdani.sk

A graph component for the upcoming update of znd, made in d3.js.

Basic configuration

znd-graph-config.js

define("znd-graph-config", [], function() {
    "use strict";

    var config = {

        /**
         * colors (array[string]) - Hexadecimal color codes used for successive
         * data series
         **/
        colors: [ "00d4ff", "ff92d7", "ffc900", "00c367", "ada9ff", "fff300",
        "ff4dd8", "007cff", "ff8600", "00acd5", "ff4d00", "00d21d",
        "b97aff", "00deb9", "c7344f" ],

        /**
         * spritesPath (string) - Relative path to the svg sprite container.
         **/
        spritesPath: "system/svg/sprite.svg",

        /**
         * groupingAggregateName (string) - The name for the aggregate series
         * which groups all the series which fall above the grouping threshold
         * (see below)
         **/
        groupingAggregateName: "Ostatné",

        /**
         * visibleSegments (int) - How many segments of the bar graph should
         * be fitted onto the screen.
         **/
        visibleSegments: 5,

        /**
         * groupingThreshold (int) - Amount of data series shown fully.
         * If the total amount of series passes this threshold, they get
         * collapsed and the expand / collapse functionality is activated
         * automatically.
         **/
        groupingThreshold: 5,

        /**
         * pieHeight (int) - The height of the pie graph in px.
         **/
        pieHeight: 30,

        /**
         * barHeight (int) - The height of the bar graph in px.
         **/
        barHeight: 400,

        /**
         * timelineItemHeight (int) - The height of one item in the timeline.
         */
        timelineItemHeight: 50,

        /**
         * containerSelector (string) - CSS selector for the container in which
         * the main element graph is to be rendered
         **/
        containerSelector: "#graph",

        /**
         * controlContainerSelector (string) - CSS selector for the container
         * encapsulating the control elements (filtering, grouping)
         **/
        controlContainerSelector: "#pie",

        /**
         * containerSelector (string) - CSS selector for the container
         * encapsulating the navigation panes
         **/
        navigationContainerSelector: ".navigable"

    };

    return config;
});

znd-graph-data.js

define("znd-graph-data", function() {
  "use strict";

  var data = {
        /**
         * series (array[string]) - Names of the data series - i.e. the names
         * of companies present in the procurement data for the person searched.
         **/
        series: ["Plastika Nitra", "Prvá tunelárska", "Váhostav"],

        /**
         * x (array(int) - Years, for which the procurement data exists.
         **/
        x: [2005, 2006, 2007, 2008, 2009, 2010, 2011] ,

        /**
         * y (array(array(int)) - A matrix of procurement sums in EUR for each
         * data series, can be denoted as y[yearIndex][seriesIndex]. E.g. Given
         * that x[0] is 2005 and series[0] is "Plastika Nitra", then
         * y[0][0] = 60 is the sum of procurement money earned by Plastika
         * Nitra in the year 2005. )
         **/
        y: [[60, 10, 40], [60, 1232300, 40], [20, 70, 15], [20, 15, 30],
        [150, 13, 50 ], [100, 60, 40], [30, 20, 10]],

        /**
         * timeline (array(array(object(string, array(string)) - The timeline
         * data structure. I.e. again, as above, timeline[0] contains positions
         * occupied in the company "Plastika Nitra".
         **/
        timeline: [[
            /**
             * position (string) - The name of the position in the company
             * occupied by the person searched.
             * ranges (array(array(ISO8601 calendar date string)) - Dates denoting the time intervals
             * during which the person searched occupied the above position.
             * There may be multiple intervals for the given position. Also,
             * the intervals may not have an upper or lower boundary (at least
             * one of the boundaries is required though).
             **/
            { position: "Štatutár", ranges: [["2005-03-01", "2008-02-01"]] },
            { position: "Zástupca riaditeľa",
              ranges: [["2008-08-08", "2009-05-02"]] },
        ],[
            { position: "Štatutárka", ranges: [["2005-02-03", "2007-09-27"],
              ["2009-12-12", "2010-01-01"]] },
            { position: "Zástupca riaditeľa", ranges: [["2005-06-01", "2008-11-18"]] }
        ],[
            { position: "Kotolník", ranges: [["2005-04-04", null]] },
        ]]
    };

    return data;
});

znd-graph's People

Contributors

ffrr avatar

Watchers

 avatar James Cloos avatar

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.