Chart legend issue

[sraiah]

hi., .ct-legend { position: relative; z-index: 10;

li {
    position: relative;
    padding-left: 23px;
    margin-bottom: 3px;
}

li:before {
    width: 12px;
    height: 12px;
    position: absolute;
    left: 0;
    content: '';
    border: 3px solid transparent;
    border-radius: 2px;
}

li.inactive:before {
    background: transparent;
}

&.ct-legend-inside {
    position: absolute;
    top: 0;
    right: 0;
}

**@for $i from 0 to length($ct-series-colors) {
    .ct-series-#{$i}:before {
        background-color: nth($ct-series-colors, $i + 1);
        border-color: nth($ct-series-colors, $i + 1);
    }
}**

}

this code is not working for chart legend

[einazare]

Hello there @sraiah ,

Thank you for your interest in working with our products. Can you please tell us where did you take that code?

Best, Manu

[sraiah]

chartist-plugin-legend

On Oct 25, 2018 6:30 PM, "Nazare Emanuel-Ioan" notifications@github.com wrote:

Hello there @sraiah https://github.com/sraiah ,

Thank you for your interest in working with our products. Can you please tell us where did you take that code?

Best, Manu

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/96#issuecomment-433040835, or mute the thread https://github.com/notifications/unsubscribe-auth/AmD0yLQq-jvOmWtpBTGQnx4ziC1EqA9yks5uobXdgaJpZM4X6F19 .

[einazare]

Hello again, @sraiah ,

Are you speaking about this npmjs plugin: https://www.npmjs.com/package/chartist-plugin-legend ? I've checked the product and can't seem to find any file named chartist-plugin-legend or any css code chart-legend. Can you please make sure you are on the right repo? Also, could you please give us a comment by completing the ISSUES_TEAMPLATE ?

# Prerequisites

Please answer the following questions for yourself before submitting an issue.

- [ ] I am running the latest version
- [ ] I checked the documentation and found no answer
- [ ] I checked to make sure that this issue has not already been filed
- [ ] I'm reporting the issue to the correct repository (for multi-repository projects)

# Expected Behavior

Please describe the behavior you are expecting

# Current Behavior

What is the current behavior?

# Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

## Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. step 1
2. step 2
3. you get it...

## Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

* Device:
* Operating System:
* Browser and Version:

## Failure Logs

Please include any relevant log snippets or files here.

When I press NEW ISSUE button on this repo, the above code appears so that we do not have to go back an forth with questions like Can you please tell us where did you take that code? or Can you please make sure you are on the right repo?. Did that ISSUES_TEMPLATE not open when you've pressed the NEW ISSUE button?

Waiting for your response.

Best, Manu

[sraiah]

Let me elaborate the issue a little

1. Yes we are talking about https://www.npmjs.com/package/chartist-plugin-legend

2. the above SCSS code is displayed on the npm page itself.

3. Our issue is above styling is not applying to the chart legend component. We suspect this has to do with this file being SCSS. Will you be able to confirm SCSS support is included in Material-dashboard-pro. if not can you give us some guidance on how to enable SCSS support.

Appreciate your support

regards Shiva

[einazare]

Hello again, @sraiah ,

As per our live docs here: https://demos.creative-tim.com/material-dashboard-pro-react/#/documentation/styles our product does make use of scss. Can I ask you where did you put that code?

Best, Manu

[sraiah]

hi, Path to scss folder is "material-dashboard-pro-react/src /assets/css/chartLegend.scss" Path to jsx file that is importing the scss file is "material-dashboard-pro-react/src/views/AChain/CustomizedPlotGraphChain.jsx"

Code from SCSS file is //begin .ct-legend { position: relative; z-index: 10;

li { position: relative; padding-left: 23px; margin-bottom: 3px; }

li:before { width: 12px; height: 12px; position: absolute; left: 0; content: ''; border: 3px solid transparent; border-radius: 2px; }

li.inactive:before { background: transparent; }

&.ct-legend-inside { position: absolute; top: 0; right: 0; }

@for $i from 0 to length($ct-series-colors) { .ct-series-#{$i}:before { background-color: nth($ct-series-colors, $i + 1); border-color: nth($ct-series-colors, $i + 1); } } } // end

Code for JSX file is //begin import React from "react"; import moment from "moment"; import PropTypes from "prop-types"; import ReactDOM from "react-dom"; import Datetime from "react-datetime"; import cx from "classnames"; import { createBrowserHistory } from "history"; // react plugin for creating charts import ChartistGraph from "react-chartist"; // react plugin for creating vector maps import { VectorMap } from "react-jvectormap"; import Legend from "chartist-plugin-legend"; // @material-ui/core components import withStyles from "@material-ui/core/styles/withStyles"; import styles from "assets/jss/material-dashboard-pro-react/customCheckboxRadioSwitch.jsx"; import "assets/scss/material-dashboard-pro-react/_colors.scss"; import "assets/css/chartLegend.scss";

// @material-ui/icons import Timeline from '@material-ui/icons/Timeline';

// core components import GridContainer from "components/Grid/GridContainer.jsx"; import GridItem from "components/Grid/GridItem.jsx"; import Card from "components/Card/Card.jsx"; import CardHeader from "components/Card/CardHeader.jsx"; import CardIcon from "components/Card/CardIcon.jsx"; import CardBody from "components/Card/CardBody.jsx"; import CardFooter from "components/Card/CardFooter.jsx"; import PageCircular from "views/ANewpages/PageCircular.jsx";

import { colouredLinesChart } from "variables/charts";

import dashboardStyle from "assets/jss/material-dashboard-pro-react/views/dashboardStyle";

import { inject, observer} from 'mobx-react';

@inject('auth','chart') @observer class CustomizedPlotGraphChain extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        selectedValue: null,
        name:'',
        maxValue:'',
        startDate:'',
        endDate:'',
        chainPropertyId:'',
        comparisonData:{
            labels: [],
            series: []
        }
    };
    this.handleChange=this.handleChange.bind(this);
    this.plotGraphForChain=this.plotGraphForChain.bind(this);
}
handleChange(event) {
    this.setState({ selectedValue: event.target.value });
}

plotGraphForChain(){
    const{JSESSIONID,isChainUSer }= this.props.auth;
    const { startDate, endDate,leadType,frequencyType,chainPropertyId}= this.props.chart;

    const self=this;
    fetch('https://Ip-Adress/sellerControllerAvenues/findChartInfo;jsessionid='+JSESSIONID+'?requestFromApp=1',{
        method: "POST",
        headers: new Headers({
            'Content-type':'application/x-www-form-urlencoded'// <-- Specifying the Content-Type.,'application/json;'
        }),
        body:`input=${JSON.stringify({"leadType":leadType,"frequencyType":frequencyType,"startDate":startDate,"endDate":endDate,"propertyIds":chainPropertyId})}`
    })
        .then((response) => {
            return response.json();//propertyIds”:”10014237,1003425”
        })
        .then((result) => {
            self.props.chart.setComparisonData(result);
            self.props.chart.showChartNow(true);
        }).catch((err)=> {
            console.log('session set'+err)
        });
}

render() { const { classes } = this.props; const { comparisonData, showChart,chainPropertyId ,chartName}= this.props.chart; let plugins = [ Legend({ legendNames: chartName }) ]; return(

{comparisonData && {showChart ? : this.plotGraphForChain()} className={classes.button}> Plot Graph } }

    );
}

} CustomizedPlotGraphChain.propTypes = { classes: PropTypes.object.isRequired }; export default withStyles(styles)(CustomizedPlotGraphChain); // end

[einazare]

Hello again, @sraiah ,

I am sorry to say this, but the code you have pasted it is really hard for me to understand. In your comment, you have some bits of code that are normal text format and bits of code that are in code format. I really do not know where to look. Can I ask you, how did you check for the presence of the scss code? How did you found out that it did not render? Also, by importing this line like so:

import "assets/css/chartLegend.scss";

Doesn't it give you an error like so:

{
  "status": 1,
  "file": "*/material-dashboard-pro-react/src/assets/css/chartLegend.scss",
  "line": 31,
  "column": 26,
  "message": "Undefined variable: \"$ct-series-colors\".",
  "formatted": "Error: Undefined variable: \"$ct-series-colors\".\n        on line 31 of src/assets/css/chartLegend.scss\n>> @for $i from 0 to length($ct-series-colors) {\n\n   -------------
------------^\n"
}

Why did you not put the file inside src/assets/scss/material-dashboard-pro-react/plugins/_chartLegend.scss and then import it with our other scss inside src/assets/scss/material-dashboard-pro-react.scss ?

Best, Manu

[sraiah]

Hi Manu, We came to the conclusion that SCSS is not included because the styling mentioned in SCSS file did not get applied on that target. Below is the SCSS code. We are not getting any import related errors.

.ct-legend { position: relative; z-index: 10;

li { position: relative; padding-left: 23px; margin-bottom: 3px; }

li:before { width: 12px; height: 12px; position: absolute; left: 0; content: ''; border: 3px solid transparent; border-radius: 2px; }

li.inactive:before { background: transparent; }

&.ct-legend-inside { position: absolute; top: 0; right: 0; }

@for $i from 0 to length($ct-series-colors) { .ct-series-#{$i}:before { background-color: nth($ct-series-colors, $i + 1); border-color: nth($ct-series-colors, $i + 1); } } }

[einazare]

Hello again @sraiah ,

If you import your code the same way we import our scss you will no longer have this issue.

put the file inside src/assets/scss/material-dashboard-pro-react/plugins/_chartLegend.scss and then import it with our other scss inside src/assets/scss/material-dashboard-pro-react.scss

Best, Manu

[sraiah]

hi, i have tried like this src/assets/scss/material-dashboard-pro-react/plugins/_chartLegend.scss now im getting error as { "status": 1, "file": "D:/dashboardBookbotby/bookbotbyProd/src/assets/css/chartLegend.scss", "line": 31, "column": 30, "message": "Undefined variable: \"$ct-series-colors\".", "formatted": "Error: Undefined variable: \"$ct-series-colors\".\n on line 31 of src/assets/css/chartLegend.scss\n>> @for $i from 0 to length($ct-series-colors) {\r\n ----- ------------------------^\n" }

[einazare]

Hello again @sraiah ,

Have you also imported the new plugin inside the src/assets/scss/material-dashboard-pro-react.scss?

Best, Manu

[sraiah]

hi again @EINazare , thank you its working

[sraiah]

Hi, We have noticed one more issue. The colors in chart ( from chartist) and the colors in legend (chart legend plugin) are not matching. Most likely both are taking color code from different sources. Any pointers on importing colors from same source, or any other way of fixing this will help

regards Shiva

[einazare]

Hello there @sraiah ,

For this, I honestly do not know what indications to give to you. I think you need to add the chartist scss the way you've done with the legend plugin. At the moment we add the chartist scss via a CDN inside the public/index.html like this:

<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">

So instead of the above, you could try adding the chartist scss like the way you've done with the legend.

Best, Manu

[sraiah]

Hi, I appreciate your response, but maybe i should reframe the questions.

Chartist colours apply from ct-series-colors class. We want to know which file contains this.

We have already tried managing colors from the node_modules/chartist/dist/scss/settings/_chartist-settings.scss, but it does not apply.

Just help us identify this file and we will take it forward from there

regards Shiva

[einazare]

Hello again, @sraiah ,

Delete from public/index.html this line of code:

<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">

After that, inside src/assets/scss/material-dashboard-pro-react/plugins folder, add chartis scss, and then import it inside src/assets/scss/material-dashboard-pro-react.scss file like the way you've did with the legend plugin.

Let me know if this worked.

Best, Manu

[sraiah]

hi again @EINazare , i have tried this src/assets/scss/material-dashboard-pro-react/plugins folder, added chartis scss, but its not working the graph response is coming as like this below

[einazare]

Hello again, @sraiah ,

From what I can see on the official chartist repo, there are more than one files of scss. Have you added all the scss files? You need to copy all the contents from the bellow link and add them inside src/assets/scss/material-dashboard-pro-react/plugins folder and then import only the chartist.scss file inside src/assets/scss/material-dashboard-pro-react.scss file like the way you've done with the legend plugin. Take a look here: https://github.com/gionkunz/chartist-js/tree/develop/src/styles

If this doesn't do the trick then I think you will need to make some tests, and verify on a simple React-App only the chartist and the legend plugin and see if they are in fact compatible, or is this an issue with our product and if so, I will need to get a step by step, with code that is not minified, guide on how to install the legend plugin so I can figure out a solution. I will also require the simple React App with only the plugin legend and the chartist plugin. Or, if it is easier, I will require to get the codes for the two apps (the one with our product, and the one with only the legend and the chartist). Otherwise, I can not understand what the problem might be. If this will be the case, I'll give you my email to send the code there.

Best, Manu

[sraiah]

hi, we resolved the issue by doing the following

1. We imported manually node_modules/chartist/dist/scss/chartist.scss into src/assets/scss/material-dashboard-pro-react/plugins and added relevant imports in material-dashboard-pro-react.scss
2. above step impacts font styling so we replaced line 61 font-size: $ct-text-size; to font-size: 0.7rem;

Thanks for your continous support regards Shiva