Giter VIP home page Giter VIP logo

yii2-c3-chart's People

Contributors

dmitry-semenov avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

yii2-c3-chart's Issues

Add custom function for x- and y-axis format option and tooltip function

With JavaScript c3 library this is easy - all I have to do is reference the custom function I've created as follows:

`
function getXTickFormatFunction(intervalIsHour) {

        return function xTickFormat(x) {
    
            if (intervalIsHour) {
                
                var hourlyFormat = d3.time.format('%H');
                
                return hourlyFormat(x);
                
               } else {
                    return createDailyXAxisValue(x);
               }
            }
    }
    
    function xTickFormat(x) {
    
        if (false) {
            
            var hourlyFormat = d3.time.format('%H');
            
            return hourlyFormat(x);
            
           } else {
                return createDailyXAxisValue(x);
           }
    }
    
    function getRotation(intervalIsHour){
        
        return intervalIsHour ? 0 : 90;
    }

    function getTooltipContentFunction(customChartValues, sortValues) {
        
       return function customTooltipContent(d, defaultTitleFormat, defaultValueFormat, color) {
       
            var customValues = customChartValues;
            var $$ = this, config = $$.config,
                    titleFormat = config.tooltip_format_title || defaultTitleFormat,
                    nameFormat = config.tooltip_format_name || function (name) { return name; },
                    valueFormat = config.tooltip_format_value || defaultValueFormat,
                    text, i, title, value, name, bgcolor;
            
                if (sortValues) {
                
                       d = d.sort(function(a,b) {
                                return b.value - a.value;
                       });
                 
                }
            
                for (i = 0; i < d.length; i++) {
                    if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }
        
                    if (! text) {
                        title = customValues['tooltipTitles'][d[i].index];
                        text = '<table class="' + $$.CLASS.tooltip + '">' + (title || title === 0 ? '<tr><th colspan="2">' + title + '</th></tr>' : '');
                    }
        
                    value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index, d);
                    if (value !== undefined) {
                        // Skip elements when their name is set to null
                        if (d[i].name === null) { continue; }
                        name = customValues['tooltipContent'][d[i].name][d[i].index];
                        bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);
        
                        text += '<tr class="' + $$.CLASS.tooltipName + '-' + $$.getTargetSelectorSuffix(d[i].id) + '">';
                        text += '<td class="name"><span style="background-color:' + bgcolor + '"></span>' + name + '</td>';
                        text += '<td class="value">' + value + '</td>';
                        text += '</tr>';
                    }
                }
            return text + '</table>';
       }
    }

  function createDailyXAxisValue(date) {
        var nextDayDate = new Date(date.getTime() + 1 * 86400000 );
        
        var weekDayFormat = d3.time.format('%w');
        var dayOfMonthFormat = d3.time.format('%e');
        var generalFormat = d3.time.format('%e-%b-%y');
        
        var weekDay = weekDayFormat(date);
        var dayOfMonth = dayOfMonthFormat(date);
        var nextDay = dayOfMonthFormat(nextDayDate);
        var isLastDayOfMonth = Number(nextDay) === 1 ? true : false;

        if (Number(weekDay) === 1) {
            var dayFormat = d3.time.format('%A');
            return dayFormat(date);
        } else {
         return generalFormat(date);
        } 
    }
    
    function generateSalesChart(chartData, intervalIsHour, chartType = 'spline', rotateAxis = false, sortTooltipValues = false) {
    
       var xTickFormatFunction = getXTickFormatFunction(intervalIsHour);
       var rotate = getRotation(intervalIsHour);
       var tooltipContentFunction = getTooltipContentFunction(chartData.customValues, sortTooltipValues);
       
       var xAxis,
           yAxis,
           data;
       
       if (rotateAxis) {
        xAxis = {
                type: 'category',
                tick: {
                    culling: false
                },
                label: chartData.xAxisLabel
            }
        data = {
                x: 'x',
                columns: chartData.initialData,
                type: chartType
            }
            
       yAxis = {
                label: chartData.yAxisLabel,
                tick: {
                    culling: false
                    }
                }
            
       } else {
        xAxis = {
                type: 'timeseries',
                tick: {
                    culling: false,
                    format: xTickFormatFunction,
                    rotate: rotate
                },
                label: chartData.xAxisLabel
            }
            
        yAxis = {
                label: chartData.yAxisLabel,
                format: d3.format(chartData['yFormat']),
                tick: {
                    format: d3.format(chartData['yTickFormat'])
                    }
                }
            
        data = {
                x: 'x',
                xFormat: chartData['xFormat'],
                columns: chartData.initialData,
                type: chartType
            }
            
       }
       
       return c3.generate({
                                data: data,
                                axis: {
                                    x: xAxis,
                                    y: yAxis,
                                    rotated: rotateAxis
                                },
                                tooltip: {
                                        format: {
                                            value: function (value, ratio, id) {
                                                var format = d3.format(',.2f');
                                                return chartData.currency.symbol +format(value);
                                            }
                                            },
                                        contents: tooltipContentFunction
                                        },
                                grid: {
                                    y: {
                                        show: true
                                    }
                                }
                            });
    
    }`

So for example, let's take the "tooltipContentFunction". How would this translate in the yii2-c3-chart widget? I.e. how could I reference a custom function that manipulates the contents of the tooltip with the yii2-c3-chart widget that would have the same outcome as when referencing a Javascript function for custom formatting in the JavaScript c3 library?

functions don't work.

Hello!

as of right now, any option in c3 that uses a function, for example:

var chart = c3.generate({
    data: {
        //...
        color: function (color, d) {
            // d will be 'id' when called for legends
            return d.id && d.id === 'data3' ? d3.rgb(color).darker(d.value / 150) : color;
        }
        //...
    }
});

will not run the code inside the function. i've played with several different methods but can't seem to find one that'll allow me to write a function in php.

When I tried to install this extension in yii2 it gives error!

Gives following error, let me know what to do?

Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - The requested package yii2mod/yii2-c3-chart could not be found in any version, there may be a typo in the package name.

Potential causes:
 - A typo in the package name
 - The package is not available in a stable-enough version according to your minimum-stability setting
   see <https://groups.google.com/d/topic/composer-dev/_g3ASeIFlrc/discussion> for more details.

Read <https://getcomposer.org/doc/articles/troubleshooting.md> for further common problems.

width + height

Hello,

There is an issue with setting these two property.

This is how it working now:

100, 'width' => 100, 'options' => [ This is how it should regarding c3 documentation: [ 'id' => 'x', ], 'clientOptions' => [ 'size' => [ 'height' => 100, 'width' => 100, ] http://c3js.org/samples/options_size.html

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.