Graph Element

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="graph-section-wrapper bg-white">
    <div class="container">

        <div class="title_area">

            <h1 class="chart-title">Performance</h1>

        </div>

        <div class="graph_filter_area">

            <div class="range_wraper">
                <div class="range-options">
                    <div class="range_picker_wrap">
                        <span class="range_picker defult_tab" data-value="3M">3M</span>
                        <span class="range_picker defult_tab" data-value="3M">6M</span>
                        <span class="range_picker active defult_tab" data-value="3M">YTD</span>
                        <span class="range_picker defult_tab" data-value="3M">ALL</span>
                    </div>
                    <div class="date_picker_wrap">
                        <span class="range_picker date_picker custome_wrap" data-value="custom">
                            <span class="cal_icon"></span>
                            Custom
                        </span>

                        <input class="range_picker date_picker from-to-wrap" type="text" name="daterange" value="" />

                    </div>
                </div>
                <div class="description">
                    <div class="desc_text">
                        <span class="main_text">Asset under management</span>
                        <span class="sub_text">USD 1091m</span>
                    </div>
                    <div class="desc_text">
                        <span class="main_text">Net asset value</span>
                        <span class="sub_text">USD 1091m</span>
                    </div>
                    <div class="desc_text">
                        <span class="main_text">Year to date</span>
                        <span class="sub_text">0%</span>
                    </div>
                </div>
            </div>

            <div class="options-wrapper">
                <h4 class="option_title">Shareclasses</h4>
                <select class="graph-options select">
                    <option value="">Select share class</option>
                    <option value="">Technology Fund</option>
                    <option value="">CCX Fund</option>
                    <option value="">Special Fund</option>
                    <option value="">Select share class</option>
                    <option value="">Technology Fund</option>
                    <option value="">CCX Fund</option>
                    <option value="">Special Fund</option>
                </select>
            </div>

        </div>

    </div>

    <div class="container-98">
        <div class="chart_wraper">
            <div class="chart-container">
                <canvas id="myChart" width="100%" height="400" class="graph-area"></canvas>
            </div>
        </div>
    </div>
</div>


        <div class="graph-section-wrapper {{ bgGrey ? 'bg-grey' : 'bg-white' }}">
  <div class="container">

    <div class="title_area">

      <h1 class="chart-title">{{title}}</h1>

    </div>

    <div class="graph_filter_area">

      <div class="range_wraper">
        <div class="range-options">
          <div class="range_picker_wrap">
            <span class="range_picker defult_tab" data-value="3M">3M</span>
            <span class="range_picker defult_tab" data-value="3M">6M</span>
            <span class="range_picker active defult_tab" data-value="3M">YTD</span>
            <span class="range_picker defult_tab" data-value="3M">ALL</span>
          </div>
          <div class="date_picker_wrap">
            <span class="range_picker date_picker custome_wrap" data-value="custom">
              <span class="cal_icon"></span>
              Custom
            </span>

            <input class="range_picker date_picker from-to-wrap" type="text" name="daterange" value="" />

          </div>
        </div>
        <div class="description">
          <div class="desc_text">
            <span class="main_text">Asset under management</span>
            <span class="sub_text">USD 1091m</span>
          </div>
          <div class="desc_text">
            <span class="main_text">Net asset value</span>
            <span class="sub_text">USD 1091m</span>
          </div>
          <div class="desc_text">
            <span class="main_text">Year to date</span>
            <span class="sub_text">0%</span>
          </div>
        </div>
      </div>

      <div class="options-wrapper">
        <h4 class="option_title">Shareclasses</h4>
        <select class="graph-options select">
          <option value="">Select share class</option>
          <option value="">Technology Fund</option>
          <option value="">CCX Fund</option>
          <option value="">Special Fund</option>
          <option value="">Select share class</option>
          <option value="">Technology Fund</option>
          <option value="">CCX Fund</option>
          <option value="">Special Fund</option>
        </select>
      </div>

    </div>

  </div>

  <div class="container-98">
    <div class="chart_wraper">
      <div class="chart-container">
        <canvas id="myChart" width="100%" height="400" class="graph-area"></canvas>
      </div>
    </div>
  </div>
</div>


        
            
            {
  "bgGrey": false,
  "title": "Performance"
}

File:

Content:


                                import $ from "jquery";
import Chart from 'chart.js/auto';
import 'daterangepicker';

$(document).ready(function () {
  $(".graph-options.select").select2();

  const element = document.getElementById('myChart');
  if (!element) {
    return;
  }

  var chart = element.getContext('2d');
  //   gradient = chart.createLinearGradient(0, 0, 0, 450);

  // gradient.addColorStop(0, 'rgba(41, 35, 92, 1)');
  // gradient.addColorStop(0.5, 'rgba(41, 35, 92, 0.8)');
  // gradient.addColorStop(1, 'rgba(41, 35, 92, 0.8)');


  var data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [{
      label: 'Custom Label Name',
      // backgroundColor: gradient,
      pointBackgroundColor: 'rgba(41, 35, 92, 1)',
      pointStyle: 'rect',
      borderWidth: 1,
      borderColor: 'rgba(41, 35, 92, 0.8)',
      data: [50, 55, 80, 81, 54, 50],
      backgroundColor: "rgba(41, 35, 92, 0.2)",
      fill: true
    }]
  };


  var options = {
    responsive: true,
    maintainAspectRatio: false,
    animation: {
      easing: 'easeInOutQuad',
      duration: 520
    },
    scales: {
      xAxes: {
        gridLines: {
          color: 'rgba(200, 200, 200, 0.05)',
          lineWidth: 1
        }
      },
      yAxes: {
        gridLines: {
          color: 'rgba(200, 200, 200, 0.08)',
          lineWidth: 1
        }
      }
    },
    elements: {
      line: {
        tension: 0.4
      }
    },
    legend: {
      display: false
    },
    point: {
      backgroundColor: 'white'
    },
    plugins: {
      tooltip: {
        titleFontFamily: 'Open Sans',
        backgroundColor: 'rgba(41, 35, 92, 1)',
        titleFontColor: 'red',
        caretSize: 0,
        cornerRadius: 0,
        xPadding: 10,
        yPadding: 10,
      }
    },
    // chartArea: {
    //   backgroundColor: 'red'
    // }
    backgroundColor: 'rgb(10,10,10)'
  };


  var chartInstance = new Chart(chart, {
    type: 'line',
    data: data,
    options: options
  });

  $(".range_picker").click(function () {
    $(".range_picker").removeClass("active");
    $(this).addClass("active");
  });

  $(".select").select2();


  $('.custome_wrap').click(function () {
    $(this).addClass("hide");
    $('.from-to-wrap').addClass("show");
  });

  $('.defult_tab').click(function () {
    $('.custome_wrap').removeClass("hide");
    $('.from-to-wrap').removeClass("show");
  });

  $(function () {
    $('input[name="daterange"]').daterangepicker({
      opens: 'right',
      showDropdowns: true,
    }, function (start, end, label) {
      console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
    });
  });

});

URL: /components/raw/graph_element/graph_element.js
Filesystem Path: components/03-components/graph_element/graph_element.js
Size: 2.7 KB

Content:


                                .graph-section-wrapper {
  padding: 80px 0;
  @include media-breakpoint-down(lg) {
    padding: 60px 0;
  }
  .container {
    max-width: 1060px;
    padding: 0 15px;
  }

  .title_area {
    margin-bottom: 40px;
    @include media-breakpoint-down(md) {
      margin-bottom: 20px;
    }
    .chart-title {
      color: #120f29;
      font-size: 19px;
      font-family: "OpenSans-SemiBold";
      line-height: 29px;
      margin-bottom: 0;
    }
  }

  .graph_filter_area {
    display: flex;
    justify-content: space-between;
    @include media-breakpoint-down(lg) {
      flex-direction: column-reverse;
    }
    .range-options {
      margin-bottom: 40px;
      display: flex;
      align-items: center;
      @include media-breakpoint-down(md) {
        display: block;
      }
      .range_picker_wrap {
        display: flex;
        align-items: center;
      }
      .range_picker {
        color: #120f29;
        font-size: 13px;
        font-family: "OpenSans-Bold";
        display: block;
        border: 2px solid #120f29;
        margin-right: 10px;
        padding: 7px 14px;
        height: 37px;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
        text-align: center;
        @include media-breakpoint-down(md) {
          width: 100%;
        }
        &:last-child {
          margin-right: 0;
        }
        &:hover,
        &.active {
          color: $secondary;
          border-color: $secondary;
          &.date_picker {
            .cal_icon {
              background-image: url("/images/calendar_blue.svg");
            }
          }
        }
        &.date_picker {
          display: flex;
          align-items: center;
          margin-left: 30px;
          @include media-breakpoint-down(md) {
            margin-left: 0;
            margin-right: 0;
            margin-top: 20px;
            justify-content: center;
          }
          .cal_icon {
            background: url("/images/calendar.svg") no-repeat;
            width: 22px;
            height: 22px;
            display: block;
            margin-right: 5px;
          }
          &.custome_wrap {
            &.hide {
              display: none;
            }
          }
          &.from-to-wrap {
            display: none;
            padding: 7px 15px 7px 28px;
            border-radius: 0;
            background: url("/images/calendar.svg") no-repeat;
            background-position: 6%;
            &:hover {
              color: #120f29;
              border-color: #120f29;
            }
            &.active {
              color: $secondary;
              border-color: $secondary;
              background-image: url("/images/calendar_blue.svg");
            }
          }
          &.show {
            display: flex;
          }
        }
      }
      .date_picker_wrap {
        display: flex;
        align-items: center;
        @include media-breakpoint-down(md) {
          flex-direction: column;
        }
      }
    }
    .description {
      max-width: 395px;
      .desc_text {
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
          display: block;
        }
        .main_text {
          color: $secondary;
          font-size: 14px;
          font-family: "OpenSans-Regular";
          line-height: 19px;
          letter-spacing: 1.32px;
          max-width: 220px;
          flex: 0 220px;
          @include media-breakpoint-down(md) {
            font-size: 11px;
          }
        }
        .sub_text {
          color: #120f29;
          font-size: 17px;
          font-family: "OpenSans-SemiBold";
          line-height: 29px;
          max-width: 120px;
          flex: 0 120px;
          @include media-breakpoint-down(md) {
            font-size: 14px;
          }
        }
      }
    }
    .options-wrapper {
      @include media-breakpoint-down(lg) {
        margin-bottom: 20px;
      }
      .option_title {
        color: #120f29;
        font-size: 14px;
        font-family: "OpenSans-Regular";
        line-height: 19px;
        letter-spacing: 1px;
        margin-bottom: 5px;
        margin-top: -24px;
        @include media-breakpoint-down(lg) {
          margin-top: 0px;
        }
      }
      .select2-container {
        width: 254px !important;
        @include media-breakpoint-down(md) {
          width: 100% !important;
        }
        &.select2-container--open {
          .select2-selection--single {
            .select2-selection__arrow {
              transform: rotate(-180deg);
            }
          }
        }
        .select2-selection--single {
          color: #120f29;
          font-size: 13px;
          font-family: "OpenSans-Bold";
          line-height: 18px;
          border: 2px solid #120f29;
          border-radius: 0;
          padding: 4px 15px;
          height: 37px;
          cursor: pointer;
          display: flex;
          align-items: center;
          background-color: transparent;
          .select2-selection__rendered {
            padding-left: 0;
          }
          .select2-selection__arrow {
            top: 0px;
            right: 10px;
            bottom: 0;
            margin: auto;
            background-image: url("/images/accordownarrow.svg");
            background-repeat: no-repeat;
            background-size: 22px;
            width: 22px;
            height: 22px;
            b {
              border: 0;
            }
          }
        }
      }
    }
  }

  .container-98 {
    max-width: 92%;
    margin: auto;
    padding: 0 15px;
    @include media-breakpoint-down(xl) {
      max-width: 100%;
    }
    @include media-breakpoint-down(md) {
      padding: 0 0px;
    }
  }
  .chart_wraper {
    margin-top: 30px;
    .chart-container {
      width: 100%;
      height: 400px !important;
    }
  }
}

.select2-dropdown {
  border: 2px solid #120f29;
  border-radius: 0;
}

.select2-search--dropdown {
  display: none;
}

.select2-results__option {
  cursor: pointer;
  color: #120f29;
  font-size: 13px;
  font-family: "OpenSans-Regular";
  line-height: 18px;
  padding: 10px 30px;
  position: relative;
  &::before {
    content: "";
    border: 2px solid #120f29;
    width: 14px;
    height: 14px;
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}

.select2-container--default .select2-results__option--highlighted.select2-results__option {
  color: #120f29;
  background-color: transparent;
}

.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option--highlighted {
  background-color: transparent;
  &::before {
    background-color: #120f29;
  }
}

.select2-container--default .select2-results > .select2-results__options {
  /* Chrome, Edge, and Safari */

  scrollbar-width: thin;
  scrollbar-color: #120f29 transparent;

  &::-webkit-scrollbar {
    width: 5px !important;
    display: block !important;
  }

  &::-webkit-scrollbar-track {
    background: transparent !important;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #120f29 !important;
    border-radius: 5px !important;
    border: 3px solid transparent !important;
  }
}

URL: /components/raw/graph_element/graph_element.scss
Filesystem Path: components/03-components/graph_element/graph_element.scss
Size: 7.2 KB

Handle: @graph_element
Preview:
- With layout
- Component only
Filesystem Path: components/03-components/graph_element/graph_element.twig

There are no notes for this item.