d-grouped-barchart/index.html

Derby grouped bar chart component using d3 and d3-tip.

<index: tag="d-grouped-barchart">
  {{bound}}
    <div as="chartContainer">
      {{if @header}}
        <div as="header" class="{{@headerClass}}">
          <div class="_content">
            <h4 class="-center">{{@header}}</h4>
          </div>
        </div>
      {{/}}
      {{if @subheader}}
        <div as="subheader" class="{{@subheaderClass}}">{{@subheader}}</div>
      {{/}}
      <div class="d-grouped-barchart-topbar">
        <div class="d-grouped-barchart-topbar-title {{titleClass}}">{{title}}</div>
        <div class="d-grouped-barchart-topbar-menu">
          <label onselectstart="return false" as="dropButton" class="d-grouped-barchart-topbar-userBlock">
            <label>Settings
              <input type="checkbox" checked="{{clickSubMenu}}"/>
            </label><img src="/img/icons/down_small.svg" class="d-grouped-barchart-topbar-arrow"/>
          </label>
          <view is="submenu"></view>
        </div>
      </div>
      <div as="chart" on-click="model.set('clickSubMenu', false)" class="d-grouped-barchart"></div>
    </div>
  {{/}}
<submenu:>
  <div as="subMenu" class="d-grouped-barchart-topbar-submenu {{unless clickSubMenu}}-hidden{{/}}">
    <div on-click="downloadPNG()">Export to PNG</div>
    <div on-click="downloadCSV()">Export to CSV</div>
    <div class="js-fullscreen">
      {{if fullscreen}}Collapsed view      {{else}}Expanded view{{/}}
    </div>
  </div>