2b:null 2c:["$","title",null,{"children":"Relativní část celku | Roman Samec | Observable"}] 31:T56a,{ const basic = Math.ceil(ratioPartValue / ratioWholeValue) * basicValue; const ratio = [ ["cast", ratioPartValue], [ "zbytek do celku", Math.ceil(ratioPartValue / ratioWholeValue) * ratioWholeValue - ratioPartValue ] ]; const onePart = _math.fraction(basicValue / ratioWholeValue); return html`${renderComponent( new VerticalStack({ children: [ new Text({ child: `a) výpočet násobením ${_math .fraction(...ratioValues) .toFraction(true)} * ${basicValue} = ${_math .fraction(...ratioValues) .mul(basicValue) .toFraction(true)}` }), new Text({ child: `b) výpočet přes 1 díl = ${basicValue} : ${ratioWholeValue} = ${onePart.toFraction( true )} potom jen násobím počtem částí = ${onePart.toFraction( true )} * ${ratioPartValue} = ${onePart .mul(ratioPartValue) .toFraction(true)}` }), new VerticalStack({ children: [ drawFraction( convertToFraction(_math.fraction(...ratioValues).mul(basicValue)) ), //renderPlot(divideToGroups(basic, ratio, true)), renderGroupPlot(dividePartitativeAndMultipleRatio(basic, ratio)) ] }) ] }) )}`; }32:T5a9,{ const basic = Math.ceil(ratioPartValue / ratioWholeValue) * _math.divide(partValue, _math.fraction(...ratioValues)); const ratio = [ ["cast", ratioPartValue], [ "zbytek do celku", Math.ceil(ratioPartValue / ratioWholeValue) * ratioWholeValue - ratioPartValue ] ]; const onePart = _math.fraction(partValue / ratioPartValue); return html`${renderComponent( new VerticalStack({ children: [ new Text({ child: `a) výpočet dělením ${partValue} : ${_math .fraction(...ratioValues) .toFraction(true)} = ${_math .fraction(...ratioValues) .inverse() .mul(partValue) .toFraction(true)}` }), new Text({ child: `b) výpočet přes 1 díl = ${partValue} : ${ratioPartValue} = ${onePart.toFraction( true )} a poté jen násobím počtem všech částí základu ${onePart.toFraction( true )} * ${ratioWholeValue} = ${onePart .mul(ratioWholeValue) .toFraction(true)}` }), new VerticalStack({ children: [ drawFraction( convertToFraction( _math.divide(partValue, _math.fraction(...ratioValues)) ) ), renderGroupPlot(dividePartitativeAndMultipleRatio(basic, ratio)) ] }) ] }) )}`; }33:[] 2f:{"id":"ace0e834ebe71ba8","slug":"percent","title":"Relativní část celku","thumbnail":"24a9bed3485c76061619d98b0bc67435d4c3d4b3fd84cc26d8c494237779bb4c","access_level":"public","create_time":"$D2022-02-12T10:45:45.854Z","update_time":"$D2024-02-11T19:51:19.147Z","view_time":null,"first_public_time":"$D2022-02-18T20:13:04.598Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"4e8eb6188a86a7df","login":"rsamec","name":"Roman Samec","avatar_url":"https://avatars-next.observableusercontent.com/4c48f0f4408a68e6e003e589591b7f0d1f94bed68ac1bb60eb91b7e498198ae5","tier":"starter_2024"},"version":2387,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"29741195570dd799","login":"rsamec","name":"Roman Samec","avatar_url":"https://avatars-next.observableusercontent.com/4c48f0f4408a68e6e003e589591b7f0d1f94bed68ac1bb60eb91b7e498198ae5","tier":null}],"members":[{"type":"individual","id":"29741195570dd799","login":"rsamec","name":"Roman Samec","avatar_url":"https://avatars-next.observableusercontent.com/4c48f0f4408a68e6e003e589591b7f0d1f94bed68ac1bb60eb91b7e498198ae5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Relativní část celku","cells":[{"id":0,"value":"# Relativní část celku","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":284,"value":"## vyjádřené jako zlomek ${formatFraction(inputRatio)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":190,"value":"viewof inputRatio = {\n const range = [0,100]\n const inputs = [['část',1],['celek',5]].map(([label,value]) => Inputs.range(range, {value, step:1, label}))\n const view = html`

${inputs.map((input,i) => html`

${input}

`)}

${inputs.map((input,i) => html`

${input}

`)}

`;\n view.value = mergeInputs(inputs, []);\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1954,"value":"html`vyjádřené jako poměr častí = ${inputRatios.join(\":\")}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1804,"value":"{\n const size = Math.min(width, 250);\n const { w, h } = { w: size, h: size };\n const plane = cartesianPlane(w, h, {\n axes: {\n y: { domain: [-5, 5], ticks: 0 },\n x: { domain: [-2, 2], ticks: 0 }\n }\n });\n\n drawCircle(plane, inputRatios, [0, 0], 2);\n return plane.svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1967,"value":"html`vyjádřené jako poměr částí ku celku = ${inputRatios.map((n,i,arr) => html`${formatFraction([n,sum(arr)])}${i < arr.length -1? \":\":\"\"}`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2118,"value":"{\n const whole = sum(inputRatios);\n return html`${renderComponent(\n new HorizontalStack({\n wrap:true,\n children: inputRatios.map((n,i) => drawFractionEx([n, whole], { nColor: d3.schemeTableau10[i], dColor:'lightgray' }))\n })\n )}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":466,"value":"## Výpočty\n\nNa relativní část celku lze nahlížet jako na vzor, který se ve výpočtech aplikuje na konkrétní hodnoty.Rozlišujeme \n\n- konkrétní hodnoty veličin (množství, délka, váha, ...)\n - základ - hodnota representující základ\n - část - hodnota represenující část z daného základu\n- vzor - relativní část celku vyjádřené jako\n - zlomek - cast/zaklad \n - procenta = procenta/100\n \nVýpočty lze provádět například výpočtem hodnoty připadající na 1 část, což representuje\n- 1 část celku (třetina, čtvrtina, ...)\n- 1% (jedna setina celku)\n- 1 dílek\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1258,"value":"#### Relativní vyjádření části celku","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1109,"value":"viewof ratioPartValue = Inputs.range([0, 500], { value: 1, label: \"Část\" })\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1113,"value":"viewof ratioWholeValue = Inputs.range([0, 200], { value: 5, label: \"Celek\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1051,"value":"ratioValues = [ratioPartValue,ratioWholeValue]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2187,"value":"drawFractionEx(ratioValues)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":782,"value":"### 1. Počítáme část pro daný základ a daný vzor (relativní část celku)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":31,"value":"viewof basicValue = Inputs.range([0, 1000], { value: 6, step: 1, label: \"Základ\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1278,"value":"html`${renderComponent(\n new VerticalStack({\n children: [\n drawFractionEx([basicValue, 1], {nColor:'red'}) \n ]\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1635,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":863,"value":"### 2. Počítáme základ pro danou část a daný vzor (relativní část celku)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":821,"value":"viewof partValue = Inputs.range([0, 1000], { value: 2, step: 1, label: \"Část\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1541,"value":"html`${renderComponent(\n new VerticalStack({\n children: [\n drawFraction([partValue, 1]), \n ]\n })\n )}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1731,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":790,"value":"### 3. Počítáme vzor (procenta, relativní část celku) pro dané hodnoty části a základu","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1768,"value":"viewof inputRatio2 = {\n const range = [0,100]\n const inputs = [['část',1],['celek',5]].map(([label,value]) => Inputs.range(range, {value, step:1, label}))\n const view = html`

${inputs.map((input,i) => html`

${input}

`)}

`;\n view.value = mergeInputs(inputs, []);\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"drawFraction(inputRatio2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1313,"value":"value2 = {\n let i = 0;\n while (true) {\n if (i > 9) {\n i = 0;\n }\n yield Promises.delay(1000, ++i);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1973,"value":"sum = numbers => numbers.reduce((out,n) => out+=n,0) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"renderGroupedPlot = (basicValue, ratio) => {\n const fraction = _math.fraction(...ratio);\n const decimalPart = fraction.floor();\n const fractionPart = fraction.mod(1);\n\n const values = (decimalPart.valueOf() > 0\n ? [\n {\n group: \"part\",\n count: basicValue * decimalPart.valueOf(),\n category: \"full\"\n }\n ]\n : []\n ).concat(\n fractionPart.valueOf() > 0\n ? dividePartitativeAndMultipleRatio(\n basicValue,\n convertToFraction(fractionPart).reduce((out, c, i) => {\n const pair = i == 0 ? [\"part\", c] : [\"rest\", c - out[0][1]];\n out.push(pair);\n console.log(pair)\n return out;\n }, [])\n )\n : []\n );\n return renderGroupPlot(values);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2069,"value":"simplifyFraction = fraction => convertToFraction(_math.fraction(...fraction))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2070,"value":"simplifyFraction([20,100])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"convertToFraction = frac => ([frac.n,frac.d])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":329,"value":"drawFractionEx = (ratio, lookOptions, max = 250) => {\n const size = Math.min(width, max);\n const { w, h } = { w: width - 64, h: 40 };\n const scale = 0.5;\n const plane = cartesianPlane(w, h, {\n axes: {\n y: { domain: [-1 * scale, 1*scale], ticks: 0 },\n x: { domain: [0, 20 * scale], ticks: 0 }\n }\n });\n\n drawFractionShape(plane, ratio, \"circle\", lookOptions);\n return plane.svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2318,"value":"drawCircleEx = (ratio, count, lookOptions) => {\n const { w, h } = { w: width - 64, h: 40 };\n const scale = 0.5;\n const plane = cartesianPlane(w, h, {\n axes: {\n y: { domain: [-1 * scale, 1 * scale], ticks: 0 },\n x: { domain: [0, 20 * scale], ticks: 0 }\n }\n });\n\n const offset = 100;\n return 'N'\n for (let i = 0; i != count; i++) {\n drawFractionCircle(\n plane,\n {\n ...ratio,\n center: [offset + i, 0]\n },\n lookOptions\n );\n }\n\n return plane.svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":235,"value":"import {renderComponent,HorizontalStack, VerticalStack, Text} from \"@rsamec/components\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":186,"value":"import {mergeInputs} from \"@mootari/observablehq-inputs-feature-73\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"import {divideToGroups,dividePartitativeAndMultipleRatio, renderPlot,renderGroupPlot} from \"@rsamec/division\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":337,"value":"import {cartesianPlane} from \"@rsamec/math-visualization\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"import {formatFraction,drawFraction, drawFractionCircle, drawFractionShape} with {scale} from \"@rsamec/fractions\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1800,"value":"import {drawCircle} from \"@rsamec/ratio\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"_math = require('https://unpkg.com/mathjs@5.9.0/dist/math.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":419,"value":"scale = 0.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"