How to use the storybook/constants/siteConstants.DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION function in storybook

<h2>Horizontal Bar Chart</h2>
          <div>
            
          </div>
        
      );
      return inlineTemplate({
        title: 'Bar Charts',
        documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION}bar-chart/`,
        description: (
          <span>
            {DESCRIPTION.C3JS_TEXT} <a href="{DESCRIPTION.C3JS_URL}">{DESCRIPTION.C3JS_URL}</a>
          </span>
        ),
        story
      });
    })
  );

<h2>Subchart Single Line Chart</h2>
          <small>select the desired area in the bottom chart</small>
          <div>
            
          </div>
        
      );

      return inlineTemplate({
        title: 'Line Charts',
        documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION}line-chart/`,
        description: (
          <span>
            {DESCRIPTION.C3JS_TEXT} <a href="{DESCRIPTION.C3JS_URL}">{DESCRIPTION.C3JS_URL}</a>
          </span>
        ),
        story
      });
    })
  );

<h2>Subchart Area Chart</h2>
          <small>select the desired area in the bottom chart</small>
          <div>
            
          </div>
        
      );
      return inlineTemplate({
        title: 'Area Charts',
        documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION}area-chart/`,
        description: (
          <span>
            {DESCRIPTION.C3JS_TEXT} <a href="{DESCRIPTION.C3JS_URL}">{DESCRIPTION.C3JS_URL}</a>
          </span>
        ),
        story
      });
    })
  );

);

      return inlineTemplate({
        title: 'Pie Charts',
        documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION}pie-chart/`,
        description: (
          <span>
            {DESCRIPTION.C3JS_TEXT}
            <a href="{DESCRIPTION.C3JS_URL}">{DESCRIPTION.C3JS_URL}</a>
          </span>
        ),
        story
      });
    })
  );

values={values}
              useDots={useDots}
              thresholdError={showErrorThreshold ? thresholdError : 0}
              thresholdErrorLegendText={thresholdErrorText}
              thresholdWarning={showWarnThreshold ? thresholdWarning : 0}
              thresholdWarningLegendText={thresholdWarningText}
              ranges={ranges}
              showAxis={showAxis}
              showLegend={showLegend}
            />
          
        
      );
      return inlineTemplate({
        title: 'Bullet Chart',
        documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION}bullet-chart/`,
        story
      });
    })
  );

size={{
                width: 210,
                height: 210
              }}
              data={donutRightConfigData}
              tooltip={donutRightConfigTooltip}
              title={donutRightConfigTitle}
              legend={donutRightConfigLegend}
            />
          
        
      );

      return inlineTemplate({
        title: 'Donut Charts',
        documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_DATA_VISUALIZATION}donut-chart/`,
        description: (
          <span>
            {DESCRIPTION.C3JS_TEXT} <a href="{DESCRIPTION.C3JS_URL}">{DESCRIPTION.C3JS_URL}</a>
          </span>
        ),
        story
      });
    })
  );