react-okr-ui/docs/component---src-docs-components-mdx-dc3af2f164d62b0ae18e.js

A React user interface toolkit for building OKR centric applications.

(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{WCFd:function(e,t,r){"use strict";r.r(t),r.d(t,"_frontmatter",(function(){return g})),r.d(t,"default",(function(){return h}));var a=r("Fcif"),n=r("+I+c"),c=(r("mXGw"),r("/FXl")),s=r("TjRS"),o=r("MJlK"),l=r("jmIX"),b=r("YbNZ"),i=r("fVN1"),p=r("1MTx"),d=r("GTvw"),u=r("sxk2"),m=r("OAxu"),O=r("BL0q"),j=r("ZFoC"),y=r("mYp2"),g=(r("aD51"),{});void 0!==g&&g&&g===Object(g)&&Object.isExtensible(g)&&!g.hasOwnProperty("__filemeta")&&Object.defineProperty(g,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"src/docs/components.mdx"}});var x={_frontmatter:g},f=s.a;function h(e){var t,r,h,v,T,P,_=e.components,R=Object(n.a)(e,["components"]);return Object(c.b)(f,Object(a.a)({},x,R,{components:_,mdxType:"MDXLayout"}),Object(c.b)("h1",{id:"components"},"Components"),Object(c.b)("p",null,"React OKR UI provides a collection of highly compositional components for a wide range of possible OKR UI requirements."),Object(c.b)("p",null,"Here's a live example. Adjust values in the Playground area to test how the components work and it's props work."),Object(c.b)(j.c,{__position:0,__code:'() => {\n  // Setup metrics\n  const metrics = [\n    {\n      id: \'1\',\n      name: \'product revenue\',\n      prefix: \'\',\n      suffix: \'%\',\n      space: false, // Fix\n      allowNegative: false,\n      decimalScale: 2,\n    },\n  ]\n  // Set grades\n  const grades = [\n    {\n      id: \'1\',\n      name: \'Fail\',\n      range: [0.0, 0.75],\n      color: \'#ef4444\',\n    },\n    {\n      id: \'2\',\n      name: \'Pass\',\n      range: [0.75, 2.0],\n      color: \'#10b981\',\n    },\n  ]\n  return (\n    <Okr metrics={metrics} grades={grades}>\n      <Objective>\n        <Row type="flex">\n          <Goal label="Objective" text="Carve out a niche" />\n          <Due\n            label="Due date"\n            date="2022/01/01"\n            options={{ year: \'numeric\', month: \'short\', day: \'numeric\' }}\n          />\n        </Row>\n        <Progress label="progress" value={0.75} />\n        <Result>\n          <Row type="flex">\n            <Goal\n              label="Key Result"\n              direction="increase"\n              metricId="1"\n              start={20}\n              end={50}\n            />\n            <Row type="flex">\n              <Current\n                className="okr-mr-1"\n                label="Current"\n                metricId="1"\n                value={30}\n              />\n              <Score\n                className="okr-ml-1"\n                direction="increase"\n                start={20}\n                end={50}\n                current={30}\n                circle\n              />\n            </Row>\n          </Row>\n        </Result>\n      </Objective>\n    </Okr>\n  )\n}',__scope:(t={props:R,DefaultLayout:s.a,Objective:o.a,Progress:l.a,Result:b.a,Current:i.a,Score:p.a,Goal:d.a,Due:u.a,Okr:m.c,Row:O.a,Playground:j.c,Props:j.d,dateOptions:y.a,metrics:y.c,results:y.d,grades:y.b},t.DefaultLayout=s.a,t._frontmatter=g,t),mdxType:"Playground"},(function(){return Object(c.b)(m.c,{metrics:[{id:"1",name:"product revenue",prefix:"",suffix:"%",space:!1,allowNegative:!1,decimalScale:2}],grades:[{id:"1",name:"Fail",range:[0,.75],color:"#ef4444"},{id:"2",name:"Pass",range:[.75,2],color:"#10b981"}],mdxType:"Okr"},Object(c.b)(o.a,{mdxType:"Objective"},Object(c.b)(O.a,{type:"flex",mdxType:"Row"},Object(c.b)(d.a,{label:"Objective",text:"Carve out a niche",mdxType:"Goal"}),Object(c.b)(u.a,{label:"Due date",date:"2022/01/01",options:{year:"numeric",month:"short",day:"numeric"},mdxType:"Due"})),Object(c.b)(l.a,{label:"progress",value:.75,mdxType:"Progress"}),Object(c.b)(b.a,{mdxType:"Result"},Object(c.b)(O.a,{type:"flex",mdxType:"Row"},Object(c.b)(d.a,{label:"Key Result",direction:"increase",metricId:"1",start:20,end:50,mdxType:"Goal"}),Object(c.b)(O.a,{type:"flex",mdxType:"Row"},Object(c.b)(i.a,{className:"okr-mr-1",label:"Current",metricId:"1",value:30,mdxType:"Current"}),Object(c.b)(p.a,{className:"okr-ml-1",direction:"increase",start:20,end:50,current:30,circle:!0,mdxType:"Score"}))))))})),Object(c.b)("hr",null),Object(c.b)("h2",{id:"okr"},"Okr"),Object(c.b)("p",null,"The ",Object(c.b)("inlineCode",{parentName:"p"},"<Okr>")," component acts as a general countainer wrapper:"),Object(c.b)("pre",null,Object(c.b)("code",{parentName:"pre",className:"language-jsx"},"<Okr metrics={metrics} grades={grades}>\n    {children}\n</Okr>\n")),Object(c.b)("h3",{id:"properties"},"Properties"),Object(c.b)("p",null,"Okr has the properties:"),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},Object(c.b)("inlineCode",{parentName:"li"},"metrics"),": i.e., the things you are measuring as results"),Object(c.b)("li",{parentName:"ul"},Object(c.b)("inlineCode",{parentName:"li"},"grades"),": i.e., how scores are interpreted e.g., ",Object(c.b)("inlineCode",{parentName:"li"},"pass")," or ",Object(c.b)("inlineCode",{parentName:"li"},"fail"))),Object(c.b)(j.d,{of:m.c,mdxType:"Props"}),Object(c.b)("h4",{id:"example-metrics-and-grades"},"Example metrics and grades"),Object(c.b)("p",null,"Here is some example configuration:"),Object(c.b)("pre",null,Object(c.b)("code",{parentName:"pre",className:"language-js"},'// Metrics\nconst metrics = [\n    {\n        id: "1",\n        name: "product revenue",\n        prefix: "",\n        suffix: "%",\n        space: false, // Fix\n        allowNegative: false,\n        decimalScale: 2,\n    },\n];\n\n// Grades\nconst grades = [\n    {\n        id: "1",\n        name: "Fail",\n        range: [0.0, 0.75],\n        color: "#ef4444",\n    },\n    {\n        id: "2",\n        name: "Pass",\n        range: [0.75, 2.0],\n        color: "#10b981",\n    },\n];\n')),Object(c.b)("hr",null),Object(c.b)("h2",{id:"objective"},"Objective"),Object(c.b)("p",null,"The ",Object(c.b)("inlineCode",{parentName:"p"},"<Objective>")," component provides a wrapper for each objective:"),Object(c.b)("pre",null,Object(c.b)("code",{parentName:"pre",className:"language-jsx"},'<Objective className="card">{children}</Objective>\n')),Object(c.b)("h3",{id:"properties-1"},"Properties"),Object(c.b)("p",null,"The component takes a className and passes it on to the component:"),Object(c.b)(j.d,{of:o.a,mdxType:"Props"}),Object(c.b)("hr",null),Object(c.b)("h2",{id:"result"},"Result"),Object(c.b)("p",null,"The ",Object(c.b)("inlineCode",{parentName:"p"},"<Result>")," component provides a wrapper for each result:"),Object(c.b)("pre",null,Object(c.b)("code",{parentName:"pre",className:"language-jsx"},'<Result className="card">{children}</Result>\n')),Object(c.b)("h3",{id:"properties-2"},"Properties"),Object(c.b)("p",null,"The component takes a className and passes it on to the component."),Object(c.b)(j.d,{of:b.a,mdxType:"Props"}),Object(c.b)("hr",null),Object(c.b)("h2",{id:"goal"},"Goal"),Object(c.b)("p",null,"The ",Object(c.b)("inlineCode",{parentName:"p"},"<Goal>")," component displays the goal text, either by processing the result object properties or simply taking objective text."),Object(c.b)(j.c,{__position:4,__code:'<Okr metrics={metrics} grades={grades}>\n  <Objective>\n    <Goal label="Objective" text="Carve out a niche" />\n    <Result>\n      <Goal\n        label="Key Result"\n        direction="increase"\n        metricId="1"\n        start={20}\n        end={50}\n      />\n    </Result>\n  </Objective>\n</Okr>',__scope:(r={props:R,DefaultLayout:s.a,Objective:o.a,Progress:l.a,Result:b.a,Current:i.a,Score:p.a,Goal:d.a,Due:u.a,Okr:m.c,Row:O.a,Playground:j.c,Props:j.d,dateOptions:y.a,metrics:y.c,results:y.d,grades:y.b},r.DefaultLayout=s.a,r._frontmatter=g,r),mdxType:"Playground"},Object(c.b)(m.c,{metrics:y.c,grades:y.b,mdxType:"Okr"},Object(c.b)(o.a,{mdxType:"Objective"},Object(c.b)(d.a,{label:"Objective",text:"Carve out a niche",mdxType:"Goal"}),Object(c.b)(b.a,{mdxType:"Result"},Object(c.b)(d.a,{label:"Key Result",direction:"increase",metricId:"1",start:20,end:50,mdxType:"Goal"}))))),Object(c.b)("h3",{id:"properties-3"},"Properties"),Object(c.b)("p",null,"The component takes objective properties to calculate the goal or simply text. It also includes an optional label:"),Object(c.b)(j.d,{of:d.a,mdxType:"Props"}),Object(c.b)("h2",{id:"due"},"Due"),Object(c.b)("p",null,"Input any parsable date string (or timestamp) to display the date. Customize using options:"),Object(c.b)(j.c,{__position:6,__code:"<Due\n  label=\"Due date\"\n  date=\"2022/01/01\"\n  options={{ year: 'numeric', month: 'short', day: 'numeric' }}\n/>",__scope:(h={props:R,DefaultLayout:s.a,Objective:o.a,Progress:l.a,Result:b.a,Current:i.a,Score:p.a,Goal:d.a,Due:u.a,Okr:m.c,Row:O.a,Playground:j.c,Props:j.d,dateOptions:y.a,metrics:y.c,results:y.d,grades:y.b},h.DefaultLayout=s.a,h._frontmatter=g,h),mdxType:"Playground"},Object(c.b)(u.a,{label:"Due date",date:"2022/01/01",options:{year:"numeric",month:"short",day:"numeric"},mdxType:"Due"})),Object(c.b)("h2",{id:"progress"},"Progress"),Object(c.b)("p",null,"Progress indicator for objectives, calculated from result scores or input as a percentage value."),Object(c.b)(j.c,{__position:7,__code:'<Okr metrics={metrics} grades={grades}>\n  <Objective>\n    <Progress label="progress" value={0.75} />\n    <Progress label="progress" results={results} />\n  </Objective>\n</Okr>',__scope:(v={props:R,DefaultLayout:s.a,Objective:o.a,Progress:l.a,Result:b.a,Current:i.a,Score:p.a,Goal:d.a,Due:u.a,Okr:m.c,Row:O.a,Playground:j.c,Props:j.d,dateOptions:y.a,metrics:y.c,results:y.d,grades:y.b},v.DefaultLayout=s.a,v._frontmatter=g,v),mdxType:"Playground"},Object(c.b)(m.c,{metrics:y.c,grades:y.b,mdxType:"Okr"},Object(c.b)(o.a,{mdxType:"Objective"},Object(c.b)(l.a,{label:"progress",value:.75,mdxType:"Progress"}),Object(c.b)(l.a,{label:"progress",results:y.d,mdxType:"Progress"})))),Object(c.b)("h3",{id:"properties-4"},"Properties"),Object(c.b)("p",null,"Takes either a percentage value, or an array of results."),Object(c.b)(j.d,{of:l.a,mdxType:"Props"}),Object(c.b)("h3",{id:"results-example"},"Results example"),Object(c.b)("p",null,"Here is how to structure your results in an array:"),Object(c.b)("pre",null,Object(c.b)("code",{parentName:"pre",className:"language-js"},'    const results = [\n        id: "1",\n        metricId: "1",\n        direction: "increase",\n        start: 50,\n        end: 10,\n        current: 20,\n    },\n]\n')),Object(c.b)("h2",{id:"current"},"Current"),Object(c.b)("p",null,"Display the current result value."),Object(c.b)(j.c,{__position:9,__code:'<Okr metrics={metrics} grades={grades}>\n  <Objective>\n    <Result>\n      <Current label="Current" metricId="1" value={30} />\n    </Result>\n  </Objective>\n</Okr>',__scope:(T={props:R,DefaultLayout:s.a,Objective:o.a,Progress:l.a,Result:b.a,Current:i.a,Score:p.a,Goal:d.a,Due:u.a,Okr:m.c,Row:O.a,Playground:j.c,Props:j.d,dateOptions:y.a,metrics:y.c,results:y.d,grades:y.b},T.DefaultLayout=s.a,T._frontmatter=g,T),mdxType:"Playground"},Object(c.b)(m.c,{metrics:y.c,grades:y.b,mdxType:"Okr"},Object(c.b)(o.a,{mdxType:"Objective"},Object(c.b)(b.a,{mdxType:"Result"},Object(c.b)(i.a,{label:"Current",metricId:"1",value:30,mdxType:"Current"}))))),Object(c.b)("h3",{id:"properties-5"},"Properties"),Object(c.b)("p",null,"Takes the current value from the result and the metricId to format the number."),Object(c.b)(j.d,{of:i.a,mdxType:"Props"}),Object(c.b)("h2",{id:"score"},"Score"),Object(c.b)("p",null,"Score the result based on start, end (goal), and current value."),Object(c.b)(j.c,{__position:11,__code:'<Okr metrics={metrics} grades={grades}>\n  <Objective>\n    <Result>\n      <Score\n        label="score"\n        direction="increase"\n        start={20}\n        end={50}\n        current={30}\n        circle\n      />\n    </Result>\n  </Objective>\n</Okr>',__scope:(P={props:R,DefaultLayout:s.a,Objective:o.a,Progress:l.a,Result:b.a,Current:i.a,Score:p.a,Goal:d.a,Due:u.a,Okr:m.c,Row:O.a,Playground:j.c,Props:j.d,dateOptions:y.a,metrics:y.c,results:y.d,grades:y.b},P.DefaultLayout=s.a,P._frontmatter=g,P),mdxType:"Playground"},Object(c.b)(m.c,{metrics:y.c,grades:y.b,mdxType:"Okr"},Object(c.b)(o.a,{mdxType:"Objective"},Object(c.b)(b.a,{mdxType:"Result"},Object(c.b)(p.a,{label:"score",direction:"increase",start:20,end:50,current:30,circle:!0,mdxType:"Score"}))))),Object(c.b)("h3",{id:"properties-6"},"Properties"),Object(c.b)("p",null,"Takes result properties, as well as a ",Object(c.b)("inlineCode",{parentName:"p"},"label"),", and ",Object(c.b)("inlineCode",{parentName:"p"},"className"),". Can display as a ",Object(c.b)("inlineCode",{parentName:"p"},"circle")," which uses the score grade to determine its background color."),Object(c.b)(j.d,{of:p.a,mdxType:"Props"}),Object(c.b)("h2",{id:"row"},"Row"),Object(c.b)("p",null,"A flex row utility component (very optional)."),Object(c.b)("pre",null,Object(c.b)("code",{parentName:"pre",className:"language-jsx"},'<Row type="flex">{children}</Row>\n')),Object(c.b)("h3",{id:"properties-7"},"Properties"),Object(c.b)("p",null,"Use to layout your row using ",Object(c.b)("inlineCode",{parentName:"p"},"flex")," or ",Object(c.b)("inlineCode",{parentName:"p"},"wrap"),"."),Object(c.b)(j.d,{of:O.a,mdxType:"Props"}))}void 0!==h&&h&&h===Object(h)&&Object.isExtensible(h)&&!h.hasOwnProperty("__filemeta")&&Object.defineProperty(h,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"src/docs/components.mdx"}}),h.isMDXComponent=!0}}]);
//# sourceMappingURL=component---src-docs-components-mdx-dc3af2f164d62b0ae18e.js.map