@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
60 lines (59 loc) • 4.94 kB
JavaScript
/**
* CodeAnalizerComment: Updated 1 imports on 2024-09-22 14:49:52
* Update:: import { IWebpartBannerProps } to '@mikezimm/fps-core-v7/lib/banner/mainReact/IWebpartBannerProps;'
*/
import * as React from 'react';
import { PivotItem, } from '@fluentui/react/lib/Pivot';
import { putObjectIntoJSON } from '../../../../components/atoms/Elements/putObjectIntoJSON';
import { SampleCharts } from './samples/SampleCharts';
// import { PleaseSeeWiki } from '../../atoms/SeeWiki';
export function getHelpStats(bannerProps) {
// headerText={ 'Stats' }
const WebPartHelpElement = React.createElement(PivotItem, { headerText: 'Stats', itemIcon: 'BarChartVerticalEdit' },
React.createElement("div", { className: 'fps-pph-content' },
React.createElement("div", { className: 'fps-pph-topic' }, "Stats are basic kpi style charts embeded into the webpart"),
React.createElement("ul", null,
React.createElement("li", null, "If you want basic KPI charts (like counting items) with little effort, these are for you!"),
React.createElement("li", null, "These are not intended for anything advanced. Use PowerBI or other alternatives for that."),
React.createElement("li", null, "Basic Charts include Tiles with Counts, Horizontal Bars, and Paretos"),
React.createElement("li", null, "They give the end user a simple button to see charts defined in the property pane."),
React.createElement("li", null, "These require some advanced settings. Please contact the SharePoint team or Join ShareLab to get more information.")),
React.createElement("div", { style: { display: 'flex' } },
React.createElement("div", null,
React.createElement("div", { className: 'fps-pph-topic' }, "Sample Chart property"),
putObjectIntoJSON(SampleCharts)),
React.createElement("div", null,
React.createElement("div", { className: 'fps-pph-topic' }, "About Charts structure"),
React.createElement("ul", null,
React.createElement("li", null, "Must follow this minimum structure."),
React.createElement("li", null, "Charts structure is made up of an array of charts ( even if you only have one )."),
React.createElement("li", null, "A typical chart is made up of these common properites"),
React.createElement("ul", null,
React.createElement("li", null,
React.createElement("b", null, "primaryField:"),
" InternalColumnName"),
React.createElement("li", null,
React.createElement("b", null, "title:"),
" Title above the chart"),
React.createElement("li", null,
React.createElement("b", null, "stat:"),
" What math operation you want to do on the primaryField"),
React.createElement("div", null, `Available stats: "sum" , "avg" , "max" , "min" , "count", "daysAgo" , "monthsAgo" , "eval"`),
React.createElement("li", null,
React.createElement("b", null, "chartTypes:"),
" Differnt types of charts you toggle through when you click on the chart bars."),
React.createElement("div", null,
"Available types: \"chartTypes\": ",
React.createElement("b", null, `[ "pareto-asc" , "pareto-dec" , "pareto-labels" , "stacked-column-labels" , "stacked-column-dec" , "stacked-column-asc" , "kpi-tiles" ]`)),
React.createElement("div", null,
"The best advice for the types is just try some and see what they do ",
`:)`)),
React.createElement("div", { className: 'fps-pph-topic' }, "The example shown here will:"),
React.createElement("ol", null,
React.createElement("li", null, `get the field called 'Id'`),
React.createElement("li", null, "get a count of the items (broken down by your refiner categories)"),
React.createElement("li", null, "first show a pareto chart decending by the count (highest total count per refiner on top)"),
React.createElement("li", null, "If you click on a bar in the chart, it will toggle between a pareto chart and a stacked Horizontal bar chart")))))));
return WebPartHelpElement;
}
//# sourceMappingURL=Stats.js.map