Component which uses strike resources to draw the chart

LCMP_StrikeChart.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" access="global" >
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    
    <ltng:require scripts="/resource/StrikeCmpResource" afterScriptsLoaded="{!c.onInit}"/>
    
    <aura:attribute name="scriptsLoaded" type="Boolean" default="{!false}"/>
    <aura:attribute name="chartRendered" type="Boolean" default="{!false}" description="Flag to display the loading spinner."/>
    <aura:attribute name="triggerRedraw" type="Boolean" access="private" default="{!false}" description="Flag that triggers redraw of the chart."/>
    <aura:attribute name="displayAxis" type="Boolean" access="private" default="{!false}" description="Flag that triggers displaying the left and bottom axis labels."/>
    <aura:attribute name="containerWidth" type="Integer" access="private" default="0" description="This is the avaliable width to draw our charts in pixels"/>
    <aura:attribute name="yAxisLabelMaxHeight" type="Integer" access="private" default="100" description="This is the max width the y axis can grow to. It should be derived from chart height."/>
    <aura:attribute name="thresholdLabel" type="String" default="Threshhold" description="Label that appears at the threshold value."/>
    <aura:attribute name="thresholdValue" type="Integer" description="Value where the threshold line appears. "/>
    
    <!-- CHANGE THE DOM AND FORCE RUN RERENDERER, WITHOUT CHANGING THE DOM RERENDER DOESN'T RUN -->
    <div class="slds-hide">{!v.triggerRedraw}</div>
    
    <aura:attribute name="type" type="String" required="{!true}" description="Type of the chart user wants to render."/>
    <aura:attribute name="title" type="String" description="Title of the chart. Shows up at the top-left corner of the chart."/>
    <aura:attribute name="leftSubtitle" type="String" description="Subtitle of the chart. Shows up at the bottom-left corner of the chart."/>
    <aura:attribute name="rightSubtitle" type="String" description="Subtitle of the chart. Shows up at the bottom-right corner of the chart."/>
    <aura:attribute name="data" type="Object" required="{!true}" description="The data based on which chart renders."/>
    <aura:attribute name="fontSize" type="String" access="private" default=".8125rem" description="The font size of the div texts"/>
    
    <!-- TOOLTIP SPECIFIC ATTRIBUTES -->
    <aura:attribute name="tooltipHtml" type="String" access="private" description="Inner html for the tooltip div. This gets generated on mouseover of a datapoint"/>
    <aura:attribute name="tooltipDisplay" type="String" access="private" default="none" description="Determines to show the tooltip or not"/>
    <aura:attribute name="tooltipXPos" type="Integer" access="private" default="0" description="X position of the tooltip"/>
    <aura:attribute name="tooltipYPos" type="Integer" access="private" default="0" description="Y position of the tooltip"/>
    <aura:attribute name="tooltipOpacity" type="Integer" access="private" default="0" description="Opacity level of the tooltip. This is used to hide it visibly while the width is calculated"/>
    
    <!-- AREA CHART SPECIFIC ATTRIBUTES -->
    <aura:attribute name="xAxisLabel" type="String" default="x-axis" description="Label that appears along X axis."/>
    <aura:attribute name="yAxisLabel" type="String" default="y-axis" description="Label that appears along Y axis."/>
    <aura:attribute name="xAxisDataType" type="String" default="Number" description="Data type on X axis."/>
    <aura:attribute name="yAxisDataType" type="String" default="Number" description="Data type on Y axis."/>
    
    <!-- BAR CHART SPECIFIC ATTRIBUTES -->
    <aura:attribute name="orientation" type="String" default="vertical" description="Determines orientation of the bar chart. It defaults to vertical."/>
    
    <!-- Not Used -->
    <!-- BUBBLE CHART SPECIFIC ATTRIBUTES -->
    <aura:attribute name="bubbleSizeLabel" type="String" default="Bubble Size" description="Label for the bubble size on the tooltip"/>
    
    <!-- Donut CHART SPECIFIC ATTRIBUTES -->
    <aura:attribute name="segmentLabel" type="String" default="Label" description="Label that appears on the tooltip for the label section."/>
    <aura:attribute name="valueLabel" type="String" default="Value" description="Label that appears on the tooltip for the value section"/>
    
    <!-- GAUGE SPECIFIC ATTRIBUTES -->
    <aura:attribute name="lowLabel" type="String" default="Low" description="Tooltip text of the low section in gauge type chart."/>
    <aura:attribute name="medLabel" type="String" default="Medium" description="Tooltip text of the mid section in gauge type chart."/>
    <aura:attribute name="highLabel" type="String" default="High" description="Tooltip text of the high section in gauge type chart."/>
    
    <!-- Rerender the chart if any attribute is changed -->
    <aura:handler name="change" value="{!v.type}" action="{!c.reRenderCharts}"/>
    <aura:handler name="change" value="{!v.data}" action="{!c.reRenderCharts}"/>
    <aura:handler name="change" value="{!v.title}" action="{!c.reRenderCharts}"/>
    <aura:handler name="change" value="{!v.leftSubtitle}" action="{!c.reRenderCharts}"/>
    <aura:handler name="change" value="{!v.rightSubtitle}" action="{!c.reRenderCharts}"/>
    <aura:handler name="change" value="{!v.xAxisLabel}" action="{!c.reRenderCharts}"/>
    <aura:handler name="change" value="{!v.yAxisLabel}" action="{!c.reRenderCharts}"/>
    <aura:handler name="change" value="{!v.xAxisDataType}" action="{!c.reRenderCharts}"/>
    <aura:handler name="change" value="{!v.yAxisDataType}" action="{!c.reRenderCharts}"/>
    <aura:handler name="change" value="{!v.thresholdLabel}" action="{!c.reRenderCharts}"/>
    <aura:handler name="change" value="{!v.thresholdValue}" action="{!c.reRenderCharts}"/>
    <aura:handler name="change" value="{!v.orientation}" action="{!c.reRenderCharts}"/>
    
    <!-- Not Used -->
    <aura:handler name="change" value="{!v.pieDonutTooltipLabelText}" action="{!c.reRenderCharts}"/>
    <aura:handler name="change" value="{!v.pieDonutTooltipValueText}" action="{!c.reRenderCharts}"/>
    <aura:handler name="change" value="{!v.lowLabel}" action="{!c.reRenderCharts}"/>
    <aura:handler name="change" value="{!v.medLabel}" action="{!c.reRenderCharts}"/>
    <aura:handler name="change" value="{!v.highLabel}" action="{!c.reRenderCharts}"/>
    
    <div class="slds-box" style="border:none">
        <div aura:id="chartContainer" class="sc-position--relative">
            
            <!-- Displays the tooltip while we hover a bar graph in the chart -->
            <div aura:id="tooltipContainer" style="{!'display: ' + v.tooltipDisplay + '; position: absolute; top: ' + v.tooltipYPos + 'px; left: ' + v.tooltipXPos + 'px;'}" class="sc-tooltip">
                <div class="label">
                    <aura:unescapedHtml value="{!v.tooltipHtml}"/>
                </div>
            </div>
            
            <!-- Displays the left axis or the Y axis of the bar graph -->
            <div aura:id="leftAxis" class="{!'slds-truncate ' + if(v.displayAxis == true, '', 'slds-hide')}" style="{!'text-align: center; position: absolute; top: 50%; left: -40px; font-size: 0.8125em; color: rgb(139, 139, 139); transform-origin: left top 0px; transform: rotate(-90deg) translateX(-50%); max-width: ' + v.yAxisLabelMaxHeight+ 'px;'}">
                {!v.yAxisLabel}
            </div>
            
            <!--Make a copy to calculate width. Can't use the original since it flickers in firefox-->
            <div aura:id="tooltipContainerCopy" class="sc-tooltip sc-hidden">
                <div class="label">
                    <aura:unescapedHtml value="{!v.tooltipHtml}"/>
                </div>
            </div>
            
            <!-- Title of the chart -->
            <div style="{!'font-size:' + v.fontSize + ';font-weight:bold;color: rgb(139, 139, 139);'}" class="slds-p-bottom--small slds-text-align--center slds-text-heading--small slds-truncate">
                {!v.title}
            </div>            
            <div aura:id="chart" class="chart-class" />
            
            <!-- If you want to display the label of the axis then the below div is displayed -->
            <aura:if isTrue="{!v.displayAxis}">
                <div aura:id="rightAxis" class="{!'slds-truncate ' + if(v.displayAxis == true, '', 'slds-hide')}" style="text-align: center; font-size: 0.8125em; color: rgb(139, 139, 139); max-width: 70%; margin: auto; padding-top: 40px">
                    {!v.xAxisLabel}
                </div>
            </aura:if>
            
            <!-- If the subtitles of the chart component are not empty then display the below div -->
            <aura:if isTrue="{!not(and(empty(v.leftSubtitle), empty(v.rightSubtitle)))}">
                <div class="slds-grid slds-p-top--small slds-text-body--small" style="{!'font-size: ' + v.fontSize + ';'}">
                    <div title="{!v.leftSubtitle}" class="slds-col slds-size--1-of-2 slds-truncate">{!v.leftSubtitle}</div>
                    <div title="{!v.rightSubtitle}" class="slds-col slds-size--1-of-2 slds-text-align--right slds-truncate">{!v.rightSubtitle}</div>
                </div>
            </aura:if>
            
        </div>
    </div>
</aura:component>