cli/MyComponent2.js at main · reactstream/cli · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

// Generate data points for f(AGE) = 1 + mod(AGE - 18) functions
const generateData = (modBase) => {
    const data = [];

    for (let age = 1; age <= 100; age++) {
        // Calculate different mod variations
        const standardMod = Math.abs(age - 18);
        const moduloTenMod = (age - 18) % 10;
        const moduloFiveMod = (age - 18) % 5;

        const standardBenefit = 1 / (1 + standardMod);
        const moduloTenBenefit = 1 / (1 + Math.abs(moduloTenMod));
        const moduloFiveBenefit = 1 / (1 + Math.abs(moduloFiveMod));

        data.push({
            age: age,
            standardMod: standardMod,
            moduloTenMod: moduloTenMod,
            moduloFiveMod: moduloFiveMod,
            standardBenefit: Number(standardBenefit.toFixed(4)),
            moduloTenBenefit: Number(moduloTenBenefit.toFixed(4)),
            moduloFiveBenefit: Number(moduloFiveBenefit.toFixed(4))
        });
    }
    return data;
};

export default function ModFunctionChart() {
    const data = generateData();

    return (
        <div className="w-full h-[800px] p-4">
            <h2 className="text-center text-xl font-bold mb-4">Funkcje MOD różnych typów</h2>

            <ResponsiveContainer width="100%" height="30%">
                <LineChart
                    data={data}
                    margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                >
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis
                        dataKey="age"
                        label={{ value: 'Wiek', position: 'insideBottomRight', offset: -10 }}
                    />
                    <YAxis
                        label={{ value: 'Wartość MOD', angle: -90, position: 'insideLeft' }}
                    />
                    <Tooltip />
                    <Legend />
                    <Line
                        type="monotone"
                        dataKey="standardMod"
                        stroke="#8884d8"
                        name="Wartość bezwzględna |AGE - 18|"
                    />
                    <Line
                        type="monotone"
                        dataKey="moduloTenMod"
                        stroke="#82ca9d"
                        name="MOD(AGE - 18, 10)"
                    />
                    <Line
                        type="monotone"
                        dataKey="moduloFiveMod"
                        stroke="#ff7300"
                        name="MOD(AGE - 18, 5)"
                    />
                </LineChart>
            </ResponsiveContainer>

            <ResponsiveContainer width="100%" height="30%">
                <LineChart
                    data={data}
                    margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                >
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis
                        dataKey="age"
                        label={{ value: 'Wiek', position: 'insideBottomRight', offset: -10 }}
                    />
                    <YAxis
                        label={{ value: 'Korzyść', angle: -90, position: 'insideLeft' }}
                    />
                    <Tooltip />
                    <Legend />
                    <Line
                        type="monotone"
                        dataKey="standardBenefit"
                        stroke="#8884d8"
                        name="Korzyść (standardowa)"
                    />
                    <Line
                        type="monotone"
                        dataKey="moduloTenBenefit"
                        stroke="#82ca9d"
                        name="Korzyść (MOD 10)"
                    />
                    <Line
                        type="monotone"
                        dataKey="moduloFiveBenefit"
                        stroke="#ff7300"
                        name="Korzyść (MOD 5)"
                    />
                </LineChart>
            </ResponsiveContainer>

            <div className="text-center mt-4">
                <h3 className="font-bold">Wzory funkcji MOD</h3>
                <ul className="list-disc list-inside text-left inline-block">
                    <li>f(x) = 1 + |x - 18|</li>
                    <li>f(x) = 1 + mod(x - 18, 10)</li>
                    <li>f(x) = 1 + mod(x - 18, 5)</li>
                </ul>
                <p className="mt-2">Różne sposoby obliczania MOD:</p>
                <ul className="list-disc list-inside text-left inline-block">
                    <li>Wartość bezwzględna: |x - 18|</li>
                    <li>Modulo 10: reszta z dzielenia przez 10</li>
                    <li>Modulo 5: reszta z dzielenia przez 5</li>
                </ul>
            </div>
        </div>
    );
}