\n {passwordError}\n \n )}\n \n );\n\n const actionDisabled =\n ['changePassword', 'create'].includes(mode) && !isPasswordValid;\n const action = (\n \n Anuluj \n \n {actionLabel}\n \n \n );\n\n if (mode === 'changePassword') {\n return (\n \n {passwordInputs('Nowe hasło', 'Powtórz nowe hasło')}\n {action}\n
\n );\n }\n\n if (mode === 'delete') {\n return (\n <>\n Czy na pewno chcesz usunąć użytkownika?
\n {action}\n \n );\n }\n\n return (\n \n \n Dostawca danych\n \n {action}\n
\n );\n};\n\nconst DeleteContainer = styled.div`\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n padding: 0 30px;\n`;\n\nexport default UserForm;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { InputNumber } from 'antd';\n\nexport default ({ children, ...props }) => (\n \n {children}\n \n);\n\nconst DisabledInput = styled(InputNumber)`\n &.ant-input[disabled] {\n color: rgba(0, 0, 0, 0.85);\n cursor: text;\n }\n`;\n","import React from 'react';\nimport { Form, InputNumber } from 'antd';\nimport DisabledInputNumber from '../DisabledInputNumber';\n\nconst NumberField = ({\n name,\n label,\n formData,\n onChange,\n editable,\n ...rest\n}) => {\n return (\n \n onChange(name, e)}\n editable={editable}\n {...rest}\n />\n \n );\n};\n\nconst CrudInputNumber = ({ value, onChange, editable, ...rest }) => {\n return editable ? (\n \n {itemDescription(item)}\n \n ));\n const _value = disabled && ((v) => v ? itemDescription(v) : 'brak')(items.find(e => e.id === value))\n\n return (\n \n {disabled\n ? (\n {options}\n )}\n \n );\n};\n\nexport default SelectField;\n","export const labelTypes = [\n {\n id: 'carbDioxMeters',\n name: 'Dwutlenek węgla',\n },\n {\n id: 'elecAirConMeters',\n name: 'Klimatyzacja',\n },\n {\n id: 'elecHeatPumpMeters',\n name: 'Pompa ciepła',\n },\n {\n id: 'elecSwitchRoomMeters',\n name: 'Włącznik',\n },\n {\n id: 'elecVentilationMeters',\n name: 'Wentylacja elek.',\n },\n {\n id: 'heatmeterVentilationMeters',\n name: 'Wentylacja ciep.',\n },\n {\n id: 'insideLightingMeters',\n name: 'Oświetlenie wew.',\n },\n {\n id: 'temperatureMeters',\n name: 'Temperatura',\n },\n];\n\nexport const labelTypesIds = labelTypes.map(label => label.id);\n","import React, { useContext, useState } from 'react';\nimport { Select, Input, Button, Spin, Row, Col, message } from 'antd';\n\nimport { AppContext } from '../../../../AppDataProvider';\nimport { AdministrationContext } from '../../AdministrationDataProvider';\nimport {\n postNewLabelName,\n postLabelNameRemoval,\n postLabelNameUpdate,\n} from '../../services/api';\n\nimport { labelTypes, labelTypesIds } from './labelTypes';\n\nconst Header = () => (\n \n
\n);\n\nconst Footer = ({ pushEmptyLabel, closeModal }) => (\n <>\n \n \n Dodaj nowy\n \n \n
\n \n \n Ok\n \n \n
\n \n);\n\nconst MeterLabels = ({ buildingId, closeModal }) => {\n const { mode, buildings } = useContext(AdministrationContext);\n const currentBuilding = buildings.find(\n building => building.id === buildingId,\n );\n const buildingMetersLabels = currentBuilding\n ? labelTypesIds.flatMap(labelTypeId =>\n currentBuilding[labelTypeId].map(label => ({\n ...label,\n typeId: labelTypeId,\n })),\n )\n : [];\n const [localLabels, setLocalLabels] = useState(buildingMetersLabels);\n const pushEmptyLabel = () => {\n const emptyLabel = {\n typeId: undefined,\n name: '',\n };\n setLocalLabels([...localLabels, emptyLabel]);\n };\n return (\n \n \n\n {localLabels.map((label, idx) => (\n
\n );\n};\n\nconst SingleLabel = ({ label, buildingId, disabled, mode }) => {\n const { wrapRequest } = useContext(AppContext);\n\n const [isDeleted, setIsDeleted] = useState();\n const [isLoading, setIsLoading] = useState(false);\n const [typeId, setTypeId] = useState(label.typeId);\n const [name, setName] = useState(label.name);\n const [id, setId] = useState(label.id);\n const [isUpdating, setIsUpdating] = useState(false);\n\n if (isDeleted) {\n return null;\n }\n\n const handleSelect = id => setTypeId(id);\n const handleType = e => setName(e.target.value);\n\n const handleDelete = async () => {\n setIsLoading(true);\n await wrapRequest(() => postLabelNameRemoval(id, typeId), {\n onError: () => {\n message.error(\n 'Nie udało się usunąć etykiety. Jeśli sytuacja się będzie powtarzać, prośba o kontakt z administracją serwisu.',\n );\n },\n onSuccess: () => {\n setIsDeleted(true);\n },\n });\n setIsLoading(false);\n };\n\n const handleUpdate = async () => {\n setIsLoading(true);\n await wrapRequest(() => postLabelNameUpdate(id, name, buildingId, typeId), {\n onError: () => {\n message.error(\n 'Nie udało się edytować etykiety. Jeśli sytuacja się będzie powtarzać, prośba o kontakt z administracją serwisu.',\n );\n },\n onSuccess: () => {},\n });\n setIsLoading(false);\n };\n const handleUpdateStart = () => setIsUpdating(true);\n const handleUpdateSave = () => {\n setIsUpdating(false);\n handleUpdate();\n };\n\n const handleAdd = async () => {\n setIsLoading(true);\n await wrapRequest(() => postNewLabelName(name, buildingId, typeId), {\n onError: () => {\n message.error(\n 'Nie udało się dodać etykiety. Jeśli sytuacja się będzie powtarzać, prośba o kontakt z administracją serwisu.',\n );\n },\n onSuccess: data => {\n setId(data.id);\n },\n });\n setIsLoading(false);\n };\n\n const labelTypeOptions = labelTypes.map(labelType => (\n \n {labelType.name}\n \n ));\n\n const typeDisabled = !!id;\n const canEditName = isUpdating || !id;\n\n return (\n \n \n {id}\n \n \n {labelTypeOptions}\n \n \n \n Usuń\n \n )}\n {id && !isLoading && mode === 'update' && (\n \n {isUpdating ? 'Zapisz' : 'Edytuj'}\n \n )}\n {!id && !isLoading && mode !== 'read' && (\n \n Dodaj\n \n )}\n \n
\n );\n};\n\nexport default MeterLabels;\n","import React, { useState, useContext } from 'react';\nimport { Button, Tabs, Form } from 'antd';\n\nimport CheckboxField from '../../../../components/CRUDs/CheckboxField';\nimport TextField from '../../../../components/CRUDs/TextField';\nimport NumberField from '../../../../components/CRUDs/NumberField';\nimport SelectField from '../../../../components/CRUDs/SelectField';\nimport { AppContext } from '../../../../AppDataProvider';\nimport { AdministrationContext } from '../../AdministrationDataProvider';\n\nimport MeterLabels from './MeterLabels';\n\nconst BuildingForm = ({\n editable,\n initialState,\n actionLabel,\n onCancel,\n onAction,\n}) => {\n const data = initialState || {\n fullName: '',\n shortName: '',\n street: '',\n city: '',\n postOffice: '',\n area: 0,\n orderedElectricPower: 0,\n orderedHeatPower: 0,\n renewableEnergySourcesPower: 0,\n hasMetersInstalled: false,\n managerEmail: '',\n category: 1,\n userId: undefined,\n };\n\n const { enums } = useContext(AppContext);\n const { users, mode } = useContext(AdministrationContext);\n\n const [formData, setFormData] = useState(data);\n\n const onChange = (fieldName, e) => {\n setFormData({\n ...formData,\n [fieldName]: e.target.value,\n });\n };\n\n const onNumberChange = (fieldName, value) => {\n setFormData({\n ...formData,\n [fieldName]: value,\n });\n };\n\n const handleMetersCheck = e =>\n setFormData({\n ...formData,\n hasMetersInstalled: e.target.checked,\n });\n\n const handleAction = () => {\n onAction(formData);\n onCancel();\n };\n\n const handleUserSelect = userId =>\n setFormData({\n ...formData,\n userId,\n });\n\n const handleCategorySelect = categoryId =>\n setFormData({\n ...formData,\n category: categoryId,\n });\n\n const textProps = {\n editable,\n onChange,\n formData,\n };\n\n const numberProps = {\n editable,\n onChange: onNumberChange,\n formData,\n };\n\n const checkboxProps = {\n editable,\n formData,\n }\n\n const actions = (\n \n Anuluj \n \n {actionLabel}\n \n \n );\n\n if (mode === 'delete') {\n return (\n <>\n Czy na pewno chcesz usunąć budynek?
\n {actions}\n \n );\n }\n\n return (\n \n \n \n \n {actions}\n
\n \n {mode !== 'create' && (\n \n \n )}\n \n );\n};\n\nexport default BuildingForm;\n","import React, { useContext } from 'react';\nimport { Modal } from 'antd';\n\nimport { AdministrationContext } from '../AdministrationDataProvider';\nimport UserForm from './Users/UserForm';\nimport BuildingForm from './Buildings/BuildingForm';\n\nconst CommonModal = () => {\n const {\n // Buildings\n createBuilding,\n updateBuilding,\n deleteBuilding,\n // Users\n createUser,\n updateUser,\n deleteUser,\n changePassword,\n // Rest\n currentEntry,\n setMode,\n setKind,\n currentConfig,\n setIsModalVisible,\n isModalVisible,\n } = useContext(AdministrationContext);\n\n const closeModal = () => {\n setIsModalVisible(false);\n setMode(undefined);\n setKind(undefined);\n };\n\n const userModalConfigs = {\n createUsers: {\n header: 'Nowy Użytkownik',\n component: () => (\n \n \n
\n \n ) : null;\n};\n\nexport default CommonModal;\n","import Administration from './Administration';\n\nexport default Administration;\n","import React, { useContext, useEffect } from 'react';\nimport { Tabs } from 'antd';\n\nimport { AdministrationContext } from './AdministrationDataProvider';\n\nimport UsersList from './scenes/Users/UsersList';\nimport BuildingsList from './scenes/Buildings/BuildingsList';\nimport IndicatorsForm from './scenes/Indicators/IndicatorsForm';\nimport CommonModal from './scenes/CommonModal';\n\nconst Administration = () => {\n const { fetchBuildings, fetchUsers } = useContext(AdministrationContext);\n\n useEffect(() => {\n fetchUsers();\n }, []);\n\n useEffect(() => {\n fetchBuildings();\n }, []);\n\n return (\n \n \n \n \n \n \n \n \n \n
\n );\n};\n\nexport default Administration;\n","export const MODES = Object.freeze({\n EDIT: \"edit\",\n LOAD: \"load\",\n});\n\nexport const extractDataSource = path => {\n const tab = path.split(\"-\");\n return tab[0];\n};\n\n// Zwraca (0)id, (1)measurement\nexport const extractEntry = path => {\n return path.split(\"-\");\n}\n\nexport const generateDataSource = (id, measurement) => `${id}-${measurement}`;\n\nexport const generateDataDescription = (description, measurement) =>\n `${description} - ${measurement}`;\n\nexport const generateDataSourcesSet = ({id, fields}) =>\n fields.measurements.map( (m, idx) => ({\n dataSource: generateDataSource(id, m),\n description: generateDataDescription(fields.description, fields.measurementsLabels[idx]),\n }));\n\nexport const NOT_LOADED_DATA_REASONS = Object.freeze({\n AXISKEY: 'axiskey',\n NOAXISDATA: 'noaxisdata',\n});\n\nexport const formatReason = (reason) => ({\n [NOT_LOADED_DATA_REASONS.AXISKEY]: 'Dane odłożone na osi X',\n [NOT_LOADED_DATA_REASONS.NOAXISDATA]: 'Brak pobranych danych odpowiadających pomiarowi wartości z osi X',\n})[reason];\n\nexport const formatReasonSymbol = (reason) => ({\n [NOT_LOADED_DATA_REASONS.AXISKEY]: 'check',\n [NOT_LOADED_DATA_REASONS.NOAXISDATA]: 'warning',\n})[reason];\n\nexport const formatReasonColor = (reason) => ({\n [NOT_LOADED_DATA_REASONS.AXISKEY]: '#52c41a',\n [NOT_LOADED_DATA_REASONS.NOAXISDATA]: '#faad14',\n})[reason];\n\nexport const getDisableReason = (dataSource, loadedData, xKey) => {\n const [id, usedKey] = extractEntry(dataSource);\n const { fields } = loadedData.find(load => load.id === id);\n if(xKey === usedKey) {\n return NOT_LOADED_DATA_REASONS.AXISKEY;\n }\n if(![...fields.measurements, 'time'].includes(xKey)) {\n return NOT_LOADED_DATA_REASONS.NOAXISDATA;\n }\n return null;\n}\n","import PropTypes from \"prop-types\";\n\nexport const settingsType = {\n title: PropTypes.string.isRequired,\n showTitle: PropTypes.bool.isRequired,\n showLegend: PropTypes.bool.isRequired,\n stopInteractive: PropTypes.bool.isRequired,\n stopAnimation: PropTypes.bool.isRequired,\n horizontalGrid: PropTypes.bool.isRequired,\n verticalGrid: PropTypes.bool.isRequired,\n xFormatter: PropTypes.func,\n yFormatter: PropTypes.func,\n};\nexport const limitType = {\n description: PropTypes.string,\n axis: PropTypes.string.isRequired,\n dashSpacing: PropTypes.number.isRequired,\n dashLength: PropTypes.number.isRequired,\n lineColor: PropTypes.string.isRequired,\n lineWidth: PropTypes.number.isRequired,\n value: PropTypes.number.isRequired,\n};\nexport const withDescriptionType = {\n description: PropTypes.string.isRequired,\n showDescription: PropTypes.bool.isRequired,\n};\nconst withIdType = {\n id: PropTypes.string.isRequired,\n};\nconst withXKeyType = {\n xKey: PropTypes.string.isRequired,\n};\nconst defaultAxisType = {\n ...withDescriptionType,\n color: PropTypes.string.isRequired,\n useDefault: PropTypes.oneOf([true]),\n}\n\nexport const xAxisType = {\n ...withDescriptionType,\n withTime: PropTypes.bool.isRequired,\n color: PropTypes.string.isRequired,\n datesNumber: PropTypes.number.isRequired,\n};\nexport const yAxisType = {\n ...withDescriptionType,\n ...withIdType,\n color: PropTypes.string.isRequired,\n showAxis: PropTypes.bool.isRequired,\n side: PropTypes.oneOf([\"left\", \"right\"]),\n unit: PropTypes.string.isRequired,\n rangeFrom: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n .isRequired,\n rangeTo: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,\n rangeSpan: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n .isRequired,\n};\nexport const usedDataType = {\n description: PropTypes.string.isRequired,\n ...withIdType,\n axis: PropTypes.string.isRequired,\n dashed: PropTypes.bool.isRequired,\n dashSpacing: PropTypes.number,\n dashLength: PropTypes.number,\n dataSource: PropTypes.string.isRequired,\n lineColor: PropTypes.string.isRequired,\n lineWidth: PropTypes.number.isRequired,\n};\nexport const chartConfigType = {\n settings: PropTypes.shape(settingsType).isRequired,\n limits: PropTypes.arrayOf(PropTypes.shape(limitType)),\n xAxis: PropTypes.oneOfType([\n PropTypes.shape({\n ...xAxisType,\n ...withXKeyType,\n }),\n PropTypes.shape({\n ...yAxisType,\n ...withXKeyType,\n }),\n PropTypes.shape({\n ...defaultAxisType,\n ...withXKeyType,\n }),\n ]).isRequired,\n yAxises: PropTypes.arrayOf(PropTypes.shape(yAxisType).isRequired).isRequired,\n};\n","import PropTypes from 'prop-types';\n\nimport { withDescriptionType } from '../../../../../../components/Charts/utils/chartTypes';\n\nexport const xAxisType = Object.freeze({\n ...withDescriptionType,\n color: PropTypes.string.isRequired,\n datesNumber: PropTypes.number,\n withTime: PropTypes.bool,\n xKey: PropTypes.string.isRequired,\n unit: PropTypes.string,\n rangeFrom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n rangeTo: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n rangeSpan: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n});\n\nexport const yAxisType = Object.freeze({\n color: PropTypes.string.isRequired,\n showAxis: true,\n side: PropTypes.oneOf([\"left\", \"right\"]),\n ...withDescriptionType,\n unit: PropTypes.string,\n rangeFrom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n rangeTo: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n rangeSpan: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n})\n\nexport const settingsType = Object.freeze({\n title: PropTypes.string.isRequired,\n showTitle: PropTypes.bool.isRequired,\n showLegend: PropTypes.bool.isRequired,\n horizontalGrid: PropTypes.bool.isRequired,\n verticalGrid: PropTypes.bool.isRequired,\n})\n\nexport const ConfigType = Object.freeze({\n settings: PropTypes.shape({...settingsType}).isRequired,\n xAxis: PropTypes.shape({\n ...xAxisType,\n }).isRequired,\n yAxises: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n fields: PropTypes.shape({...yAxisType}).isRequired,\n }).isRequired).isRequired,\n});\n\nexport const EditDataType = Object.freeze({\n building: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n user: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n description: PropTypes.string.isRequired,\n measurements: PropTypes.arrayOf(PropTypes.string).isRequired,\n periodType: PropTypes.string.isRequired,\n});\n\nexport const DataType = Object.freeze({\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n fields: PropTypes.shape({...EditDataType}).isRequired,\n data: PropTypes.arrayOf(PropTypes.shape({\n time: PropTypes.number.isRequired,\n })),\n});\n\nexport const EditUsedDataType = Object.freeze({\n description: PropTypes.string.isRequired,\n axis: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n showRegresion: PropTypes.bool,\n dotted: PropTypes.bool,\n lineWidth: PropTypes.number,\n lineColor: PropTypes.string.isRequired,\n dashed: PropTypes.bool,\n dashLength: PropTypes.number,\n dashSpacing: PropTypes.number,\n});\n\nexport const UsedDataType = Object.freeze({\n dataSource: PropTypes.string.isRequired,\n fields: PropTypes.shape({...EditUsedDataType}).isRequired,\n show: PropTypes.bool.isRequired,\n});\n","import styled from 'styled-components';\n\nexport default styled.div`\n transition: background 1s ease-in;\n & .ant-list-item {\n padding: 8px 0;\n }\n`;\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport { Drawer } from 'antd';\n\nexport default ({children, ...props}) =>\n \n {children}\n \n\nconst StyledDrawer = styled(Drawer)`\n & .ant-drawer-wrapper-body {\n overflow: auto;\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { Button } from \"antd\";\n\nexport const SetupList = styled.div``;\n\nexport const SetupAdd = ({description, onClick, icon, ...props}) => (\n \n \n \n {description}\n \n \n \n)\n\nconst StyledSetupAdd = styled.div`\n display: flex;\n align-items: baseline;\n margin-top: 4px;\n margin-right: 8px;\n`;\nconst StyledSetupDescription = styled.div`\n font-weight: 500;\n flex: 1;\n`;\n\nexport const ButtonForList = ({onClick, disabled, children, ...props}) =>\n {children} \n\nconst StyledButtonForList = styled.span`\n cursor: ${({disabled}) => disabled ? \"default\" : \"pointer\"}\n color: ${({disabled}) => disabled ? \"#999\" : \"#1890ff\"}\n user-select: none;\n &:hover {\n text-decoration: ${({disabled}) => disabled ? \"none\" : \"underline\"}\n }\n`;\n","import axios from 'axios';\nimport moment from 'moment';\nimport { sortBy } from 'lodash';\n\n\nconst GenerateMultiQuery = (multi) =>\n multi.map(e => (([type, id]) => ({type, id: parseInt(id, 10)}))(e.split('_')))\n .reduce((result, {type, id}) => {\n const index = result.findIndex(r => r.type === type);\n if(index !== -1) {\n result[index].measurements.push({id});\n }\n else {\n result.push({\n type,\n measurements: [{id}],\n });\n }\n return result;\n }, []);\n\nconst parseBaseMeasurements = (baseData) =>\n baseData.map(({Date: time, ...rest}) => ({\n time: moment(time).valueOf(),\n ...rest,\n }));\n\nconst parseMultiMeasurements = (mutliData) =>\n mutliData.reduce((result, {measurements, type}) => [\n ...result,\n ...measurements.map(({meterId, time, value}) =>({\n time: moment(time).valueOf(),\n [`${type}_${meterId}`]: value,\n })),\n ], []);\n\n const mergeData = async (loadedData = []) => {\n return new Promise((resolve) => {\n const sorted = sortBy(loadedData, 'time');\n const final = [];\n let value = null;\n for (let i = 0; i < sorted.length; i += 1) {\n if (sorted[i].time === value) {\n const last = final.pop();\n final.push({ ...last, ...sorted[i] });\n } else {\n final.push(sorted[i]);\n }\n value = sorted[i].time;\n }\n resolve(final);\n });\n };\n\n\nexport const getLineChartData = async ({building, from, to, measurements}) => {\n const parsedRequest = {\n filterReadings: {\n buildingId: building,\n lowerBound: from,\n upperBound: to,\n },\n measurements: {\n baseMeasurements: measurements.filter(e => !e.includes('_')),\n multipleMeasurements: GenerateMultiQuery(measurements.filter(e => e.includes('_'))),\n },\n };\n const resp = await axios.post(`/Analysis/data`, parsedRequest);\n const merged = await mergeData([\n ...parseBaseMeasurements(resp.data.baseMeasurements),\n ...parseMultiMeasurements(resp.data.multiMeasurements),\n ]);\n return {\n ...resp,\n data: merged,\n }\n}\n\nexport const getBuildingMeasurements = async (buildingId) => {\n const resp = await axios.get(`/Analysis/measurements/${buildingId}`);\n return resp;\n}\n","import React, { useContext, useState } from 'react';\n\nimport { getBuildingMeasurements } from './services/api';\n\nimport { AppContext } from '../../AppDataProvider';\n\nconst AnalysisContext = React.createContext({});\n\nconst AnalysisDataProvider = ({children}) => {\n const { startAsyncTask, finishAsyncTask, wrapRequest } = useContext(AppContext);\n\n const [buildingsMeasurements, setBuildingMeasurements] = useState({});\n\n async function fetchMeasurements(buildingId) {\n if(!buildingsMeasurements[buildingId]) {\n startAsyncTask(\"Pobieranie opomiarowanych parametrów. Operacja może trwać do kilkunastu sekund.\");\n await wrapRequest(() => getBuildingMeasurements(buildingId), {\n onSuccess: (data) => {\n setBuildingMeasurements({\n ...buildingsMeasurements,\n [buildingId]: data,\n });\n },\n });\n finishAsyncTask();\n }\n }\n\n const state = {\n buildingsMeasurements,\n fetchMeasurements,\n }\n\n return (\n \n {children}\n \n );\n}\n\nexport { AnalysisContext };\nexport default AnalysisDataProvider;\n","import moment from \"moment\";\n\nexport const formatMonth = timestamp =>\n moment.unix(timestamp / 1000).format(\"MMMM\");\nexport const formatDate = timestamp =>\n moment.unix(timestamp / 1000).format(\"YYYY-MM-DD\");\nexport const formatHour = timestamp => moment.unix(timestamp / 1000).format(\"HH:mm\");\nexport const formatDateTime = timestamp =>\n moment.unix(timestamp / 1000).format(\"YYYY-MM-DD HH:mm\");\n\nexport const isFilledString = str => str && str.length;\n\nexport const formatNumber = (num, {position = 0, addSpace = true} = {}) => (\n (str) => addSpace ? numberWithSpaces(str) : str\n )(position < 0 ? parseFloat(num.toFixed(-position)) : Math.round(num / 10**position) * 10**position);\n\nexport const formatMoney = (num, {addSpace = true} = {}) =>\n ((str) => addSpace ? numberWithSpaces(str) : str)(num.toFixed(2));\n\nconst numberWithSpaces = (x) => {\n const parts = x.toString().split(\".\");\n parts[0] = parts[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, \" \");\n return parts.join(\".\");\n}\n\nexport const removePolish = str =>\nstr.replace(/ę/ig,'e').replace(/[żź]/ig,'z').replace(/ó/ig,'o').replace(/ł/ig,'l')\n .replace(/ć/ig,'c').replace(/ś/ig,'s').replace(/ń/ig,'n').replace(/ą/ig,'a')\n .replace(/Ę/ig,'E').replace(/[ŻŹ]/ig,'Z').replace(/Ó/ig,'O').replace(/Ł/ig,'L')\n .replace(/Ć/ig,'C').replace(/Ś/ig,'S').replace(/Ń/ig,'N').replace(/Ą/ig,'A');\n\nexport const formatPeriod = (startDate, endDate) => {\n let period = `${moment(startDate).format('MMMM YYYY')} - ${moment(endDate).format('MMMM YYYY')}`;\n if(moment(startDate).isSame(moment(endDate), 'year')) {\n period = `${moment(startDate).format('MMMM')} - ${moment(endDate).format('MMMM YYYY')}`;\n if(moment(startDate).isSame(moment(endDate), 'month')) {\n period = moment(startDate).format('MMMM');\n }\n }\n return period;\n}\n\nexport const formatDownfall = str =>\n isNumberConverted(str) ? Number.parseFloat(str) : str;\n\nexport const isNumberConverted = str =>\n !Number.isNaN(Number.parseFloat(str));\n","import React, { useContext } from 'react';\nimport styled from 'styled-components';\nimport { filter } from 'lodash';\n\nimport { Icon, Select, Empty, TreeSelect } from 'antd';\n\nimport { AppContext } from '../AppDataProvider';\nimport { removePolish } from '../utils/formaters';\n\nconst Option = Select.Option;\n\nconst userFormatter = id => `user-${id}`;\n\nconst buildingsByUser = (users, buildings) =>\n users.map(user => ({\n ...user,\n buildings: (user.buildingsIds || []).map(id => buildings.find(e => e.id === id)).filter(e => e),\n }));\n\nconst buildingDefaultFilterOption = (input, option) =>\noption.props.isLeaf ?\n removePolish(option.props.title.toLowerCase()).includes(removePolish(input.toLowerCase()))\n :\n option.props.children.reduce((prev, child) => prev || buildingDefaultFilterOption(input, child), false);\n\nexport const BuildingSelect = ({onChange, selectedUser, ...props}) => {\n const {measuredBuildings, standardUsers, isAdmin} = useContext(AppContext);\n const usedUser = selectedUser ?\n filter(standardUsers, ({id}) => userFormatter(id) === selectedUser)\n :\n standardUsers;\n return (\n \n \n \n \n {isAdmin\n ? (\n }\n onChange={onChange}\n filterTreeNode={buildingDefaultFilterOption}\n treeData={buildingsByUser(usedUser, measuredBuildings).map(e => ({\n title: e.name,\n isLeaf: false,\n value: userFormatter(e.id),\n selectable: false,\n key: userFormatter(e.id),\n children: e.buildings.map(({id, fullName}) => ({\n title: fullName,\n value: id,\n key: id,\n isLeaf: true,\n })),\n }))}\n style={selectStyle}\n {...props}\n />)\n : ({measuredBuildings.map(({id, fullName}) => (\n \n {fullName}\n ))}\n )}\n \n \n );\n}\n\nconst defaultFilterOption = (input, option) =>\n removePolish(option.props.children.toLowerCase()).includes(removePolish(input.toLowerCase()));\n\nexport const UserSelect = ({\n onChange,\n ...props\n}) => {\n const { standardUsers } = useContext(AppContext);\n return (\n \n \n \n \n \n }\n onChange={onChange}\n filterOption={defaultFilterOption}\n style={selectStyle}\n {...props}\n >\n {standardUsers.map(({id, name}) =>\n \n {name}\n ,\n )}\n \n \n \n );\n}\n\nconst selectStyle = {\n width: '100%',\n}\n\nconst IconHolder = styled.div`\n padding: 4px 12px 4px 0;\n flex: 0;\n`;\n\nconst SelectHolder = styled.div`\n flex: 1;\n min-width: 0;\n position: relative;\n`;\n\nconst StyledCommonSelect = styled.div`\n width: 100%;\n display: flex;\n`;\n","import React, { useState, useEffect } from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { isNil, isArray } from 'lodash';\nimport { Form } from 'antd';\n\nconst Item = Form.Item;\n\nexport const validate = ({\n showSuccess,\n required,\n rules,\n value,\n}) => {\n const isNull = isNil(value) || value === '';\n const onSuccess = showSuccess ? 'success' : undefined;\n if(!required && isNull) {\n return {};\n }\n if(required && (isNull || (isArray(value) && value.length === 0))) {\n return {\n validateStatus: 'error',\n help: 'Podaj wymaganą wartość',\n }\n }\n let isValid = true;\n let errorMessage;\n for(let i = 0; i < rules.length; i+=1) {\n const result = rules[i].validate(value);\n if(!result) {\n errorMessage = rules[i].errorMessage || errorMessage;\n isValid = false;\n break;\n }\n }\n return {\n validateStatus: isValid ? onSuccess : 'error',\n help: errorMessage,\n };\n}\n\nexport default Object.assign(({\n onChange,\n value,\n valueKey = 'value',\n children,\n rules = [],\n triggered,\n showSuccess,\n required,\n isEdit,\n disableOnEdit,\n fetching,\n disableOnFetching,\n ...props\n}) => {\n const isNull = isNil(value) || value === '';\n const [_triggered, setTrigger] = useState(triggered);\n\n useEffect(() => {\n setTrigger(triggered);\n }, [triggered]);\n\n const { onBlur } = children.props;\n React.Children.only(children);\n const wrappedBlur = (v) => {\n if(onBlur) onBlur(v);\n setTrigger(true);\n }\n const validateFun = (v) => validate({\n showSuccess,\n required,\n rules,\n value: v,\n });\n const wrappedOnChange = (v) => {\n let value = v;\n if(v.target) {\n if(v.target.type === \"checkbox\") {\n value = v.target.checked;\n }\n if(v.target.type === \"text\") {\n value = v.target.value;\n }\n }\n onChange(value, validateFun(value).validateStatus !== 'error');\n }\n return (\n {React.cloneElement(\n children,\n {\n onBlur: wrappedBlur,\n [valueKey]: value,\n onChange: wrappedOnChange,\n disabled: (isEdit && disableOnEdit) || (fetching && disableOnFetching),\n },\n )}\n );\n},\n{\n propTypes: {\n rules: PropTypes.arrayOf(\n PropTypes.shape({\n validate: PropTypes.func.isRequired,\n errorMessage: PropTypes.string,\n }),\n ),\n showSuccess: PropTypes.bool,\n },\n});\n\nconst StyledItem = styled(Item)`\n ${({hasIcon}) => hasIcon ? `.ant-form-explain {\n padding-left: 36px;\n }` : ''}\n`;\n","import styled from 'styled-components';\nimport { Form } from 'antd';\n\nexport const StyledFrom = styled(Form)`\n height: 100%;\n display: flex;\n flex-direction: column;\n`;\n\nexport const FormInner = styled.div`\n flex: 1\n`;\n\nexport const FormFooter = styled.div`\n margin-top: auto;\n border-top: 1px solid #e9e9e9;\n padding: 16px 24px 0 24px;\n text-align: right;\n margin-left: -24px;\n margin-right: -24px;\n`;\n","import React, { Fragment } from \"react\";\n\nconst TYPES = Object.freeze({\n NORMAL: \"normal\",\n UPPER: \"upper\",\n LOWER: \"lower\",\n});\n\nconst typesConverter = {\n [TYPES.NORMAL]: (str, { ...props }) => {str} ,\n [TYPES.UPPER]: (str, { ...props }) => {str} ,\n [TYPES.LOWER]: (str, { ...props }) => {str} ,\n};\n\nconst getBracketExpr = str => {\n const pos = str.indexOf(\"}\");\n return {\n start: str.slice(1, pos),\n end: str.slice(pos + 1),\n };\n};\n\nconst getFirstChart = str => ({\n start: str.slice(0, 1),\n end: str.slice(1),\n});\n\nconst splitChartConverter = (str, splitter, type) => {\n const result = [];\n const [first, ...rest] = str.split(splitter);\n if (first.length) {\n result.push({\n type: TYPES.NORMAL,\n string: first,\n });\n }\n rest.forEach(e =>\n (fun => {\n const { start, end } = fun(e);\n if (start.length) {\n result.push({\n type,\n string: start,\n });\n }\n if (end.length) {\n result.push({\n type: TYPES.NORMAL,\n string: end,\n });\n }\n })(e.startsWith(\"{\") ? getBracketExpr : getFirstChart),\n );\n return result;\n};\n\nconst supConverter = str => splitChartConverter(str, \"^\", TYPES.UPPER);\n\nconst subConverter = str => splitChartConverter(str, \"_\", TYPES.LOWER);\n\nconst mathTextConverter = str => {\n try {\n let result = [\n {\n type: TYPES.NORMAL,\n string: str,\n },\n ];\n const converters = [supConverter, subConverter];\n converters.forEach(conv => {\n let nResult = [];\n result.forEach(({ type, string }) => {\n if (type === TYPES.NORMAL) {\n nResult = [...nResult, ...conv(string)];\n } else {\n nResult.push({\n type,\n string,\n });\n }\n });\n result = nResult;\n });\n return result.map(({ type, string }, key) =>\n typesConverter[type](string, { key }),\n );\n } catch {\n return str;\n }\n};\n\nexport default ({ children, ...props }) => (\n {mathTextConverter(children)} \n);\n","import React, {useState} from 'react'\nimport styled from 'styled-components';\nimport { difference, filter, uniq } from 'lodash';\n\nimport { Checkbox, Input } from 'antd';\n\nconst defaultRender = (e) => e;\n\nconst reducer = (prev, isIn) => ({\n checkedAll: prev.checkedAll && isIn,\n checkedAny: prev.checkedAny || isIn,\n});\n\nexport default ({\n options = [],\n value = [],\n onChange,\n allowAll,\n allowSearch,\n filterOption,\n renderItem = defaultRender,\n}) => {\nconst [filterValue, changeFilter] = useState();\n\nconst onCheck = (event, key) => {\n if(event.target.checked) {\n onChange([...value, key]);\n }\n else {\n onChange(filter(value, e => e !== key));\n }\n}\n\nconst filteredOptions = filter(options,\n e => !filterOption || !filterValue || filterValue === '' || filterOption(filterValue, e));\n\nconst filteredEnabled = filter(filteredOptions, e => !e.disabled);\n\nconst { checkedAll, checkedAny } = filteredEnabled.reduce(\n (prev, opt) => reducer(prev, value.includes(opt.key)),\n {\n checkedAll: true,\n checkedAny: false,\n },\n);\n\nconst onCheckAll = () => {\n const all = filteredEnabled.map(opt => opt.key)\n if(checkedAll) {\n onChange(difference(value, all));\n }\n else {\n onChange(uniq([\n ...all,\n ...value,\n ]));\n }\n}\nreturn (\n \n {allowAll && (\n \n \n Zaznacz wszystkie\n \n )}\n {allowSearch && (\n \n changeFilter(e.target.value)}\n allowClear\n\n />\n )}\n \n {filteredOptions.map(({key, ...props}) =>\n - \n
onCheck(event, key)}\n checked={value.includes(key)}\n {...props}\n >\n {renderItem({key, ...props})}\n \n )}\n \n );\n}\n\nconst MultiCheckBox = styled.div`\n padding: 7px 15px;\n border: 1px solid #E9E9E9;\n border-radius: 4px;\n .has-error & {\n border-color: #f5222d;\n }\n`;\n\nconst Header = styled.div`\n border-bottom: 1px solid #E9E9E9;\n padding: 8px 0 7px 0;\n`;\n\nconst CheckboxGroup = styled.div`\n height: 160px;\n overflow: auto;\n ${Header} + & {\n margin-top: 8px;\n }\n`;\n\nconst Item = styled.div`\n & + & {\n margin-top: 8px;\n }\n`;\n","import React, { useContext, useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { filter } from 'lodash';\nimport { Transfer, Empty } from 'antd';\n\nimport { AnalysisContext } from '../AnalysisDataProvider';\n\nimport MathParser from '../../../components/MathParser';\nimport MultiCheckboxGroup from '../../../components/MultiCheckboxGroup';\n\nimport { removePolish } from '../../../utils/formaters';\n\nconst measurementsConfig = require('./measurementsConfig.json');\n\nexport const getMultipleLabelFromLoaded = (key, loadedData) => {\n const fields = loadedData.find(e => e.fields.measurements.includes(key)).fields;\n const index = fields.measurements.findIndex(e => e === key);\n return `${fields.description} - ${fields.measurementsLabels[index]}`;\n}\n\nexport const getMeasurementLabel = (key, measurements) => {\n const prefixes = key.split('_');\n if (prefixes.length > 1) {\n const multiLabel = measurementsConfig.multipleMeasurements.find(e => e.key === prefixes[0]).label;\n const customLabel = measurements.multipleMeasurements\n .find(e => e.type === prefixes[0]).measurements.find(e => e.id.toString() === prefixes[1]).description;\n return `${multiLabel} - ${customLabel}`;\n }\n return measurementsConfig.baseMeasurements.find(e => e.key === prefixes[0]).label;\n}\n \nexport const getMeasurementUnit = (key) => {\n const prefixes = key.split('_');\n return (prefixes.length > 1)\n ? measurementsConfig.multipleMeasurements.find(e => e.key === prefixes[0]).unit\n : measurementsConfig.baseMeasurements.find(e => e.key === prefixes[0]).unit;\n}\n\nconst filterOption = (inputValue, option) =>\n removePolish(option.label.toLowerCase()).includes(removePolish(inputValue.toLowerCase()));\n\nexport const MeasurementsPickerTransfer = ({onChange, building, value, disabledValues = [], ...props}) => {\n const { buildingsMeasurements } = useContext(AnalysisContext);\n const measurements = building && buildingsMeasurements[building];\n const dataSource = measurements && [\n ...(filter(measurementsConfig.baseMeasurements,\n ({key}) => measurements.baseMeasurements.includes(key))),\n ...mapMultiple(measurements.multipleMeasurements, measurementsConfig.multipleMeasurements)\n ];\n\n const [selectedKeys, setSelectedKeys] = useState();\n\n useEffect(() => {\n setSelectedKeys([]);\n }, [building]);\n\n const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {\n setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);\n };\n \n return measurements ?\n (\n \n Potencjalne dane \n Wybrane dane \n \n ({\n ...e,\n disabled: disabledValues.includes(e.key),\n }))}\n showSearch\n filterOption={filterOption}\n onChange={onChange}\n onSelectChange={handleSelectChange}\n render={item => {item.label} }\n {...props}\n targetKeys={value}\n selectedKeys={selectedKeys}\n />\n )\n :\n (\n {building\n ? \"Pobieranie danych o budynku...\"\n : \"Wybierz budynek by zobaczyć oprzyrządowane dane\"}\n \n }\n />);\n}\n\nconst mapMultiple = (possible, config) => {\n const result = [];\n possible.filter(({ measurements}) => measurements && measurements.length > 0)\n .forEach(({type, measurements}) => {\n const passed = config.find(({key}) => key === type);\n if(passed) {\n measurements.forEach(({description, id}) => {\n result.push({\n key: `${passed.key}_${id}`,\n label: `${passed.label} - ${description}`,\n unit: passed.unit,\n });\n });\n }\n });\n return result;\n}\n\nexport default ({onChange, building, value, disabledValues = [], ...props}) => {\n const { buildingsMeasurements } = useContext(AnalysisContext);\n const measurements = building && buildingsMeasurements[building];\n const dataSource = measurements && [\n ...(filter(measurementsConfig.baseMeasurements,\n ({key}) => measurements.baseMeasurements.includes(key))),\n ...mapMultiple(measurements.multipleMeasurements, measurementsConfig.multipleMeasurements)\n ];\n\n return measurements ?\n ( ({\n ...e,\n disabled: disabledValues.includes(e.key),\n }))}\n onChange={onChange}\n allowAll\n allowSearch\n filterOption={filterOption}\n renderItem={item => {item.label} }\n value={value}\n {...props}\n />)\n :\n (\n {building\n ? \"Pobieranie danych o budynku...\"\n : \"Wybierz budynek by zobaczyć oprzyrządowane dane\"}\n \n }\n />);\n}\n\nconst MeasurementsPicker = styled.div``;\n\nconst HeaderItem = styled.div`\n flex: 1;\n text-align: center;\n`;\n\nconst Header = styled.div`\n display: flex;\n & ${HeaderItem}:first-child {\n margin-right: 24px;\n }\n & ${HeaderItem}:last-child {\n margin-left: 24px;\n }\n margin-bottom: 8px;\n font-size: 0.9rem;\n`;\n\nconst StyledTransfer = styled(Transfer)`\n display: flex;\n align-items: center;\n & .ant-transfer-list {\n width: unset;\n flex: 1 0 180px;\n }\n`;\n","import React, { useState, useEffect, useContext } from 'react';\nimport moment from 'moment';\nimport PropTypes from 'prop-types';\nimport { filter, isNil } from 'lodash';\nimport { Button, Select, DatePicker, message } from 'antd';\n\nimport { AppContext } from '../../../../../../AppDataProvider';\nimport { AnalysisContext } from '../../../../AnalysisDataProvider';\n\nimport { getLineChartData } from '../../../../services/api';\n\nimport { MODES } from '../utils/constants';\n\nimport DisabledInput from '../../../../../../components/DisabledInput';\nimport {\n BuildingSelect,\n UserSelect,\n} from '../../../../../../components/BuildingSelect';\nimport FormItemWrapper, {\n validate,\n} from '../../../../../../components/FormItemWrapper';\nimport {\n FormFooter,\n FormInner,\n StyledFrom,\n} from '../../../../components/StyledForm';\nimport MeasurementsPicker, {\n getMeasurementLabel,\n} from '../../../../components/MeasurementsPicker';\n\nconst { Option } = Select;\nconst { RangePicker } = DatePicker;\n\nconst isDateAfter = date => moment().isBefore(date);\n\nconst LoadDataForm = Object.assign(\n ({ mode, editedData, onClose, loadData, updateData, now }) => {\n const isEdit = mode === MODES.EDIT;\n\n const {\n buildings,\n users,\n isAdmin,\n startAsyncTask,\n finishAsyncTask,\n wrapRequest,\n } = useContext(AppContext);\n const { buildingsMeasurements, fetchMeasurements } = useContext(\n AnalysisContext,\n );\n\n const [triggered, setTriggered] = useState(false);\n const [_value, setValue] = useState(editedData);\n\n const formSettings = {\n isEdit,\n triggered,\n };\n\n useEffect(() => {\n setValue(editedData);\n }, [editedData]);\n\n const updateWithValid = (data, isValid) =>\n isValid\n ? updateData({ ...editedData, ...data })\n : setValue({ ..._value, ...data });\n\n const update = key => (data, isValid) =>\n updateWithValid({ [key]: data }, isValid);\n\n const changeUser = (user, isValid) =>\n updateWithValid(\n {\n user,\n ...(user !== undefined && {\n building: undefined,\n measurements: undefined,\n }),\n },\n isValid,\n );\n\n const changePeriodType = (periodType, isValid) =>\n updateWithValid(\n {\n periodType,\n ...(!_value[periodType] && {\n [periodType]: periods[periodType].default,\n }),\n },\n isValid,\n );\n\n const getBuildingShortcut = building => {\n const found = buildings.find(e => e.id === building);\n if (!isAdmin) {\n return found && found.shortName;\n }\n const user = users.find(c => c.buildingsIds.includes(building));\n return user && found && `${user.name} - ${found.shortName}`;\n };\n\n const updateMeasurementsOnEdit = value =>\n setValue({ ..._value, measurements: value });\n\n const changeBuilding = (building, isValid) => {\n if (isValid && !isNil(building)) {\n fetchMeasurements(building);\n }\n updateWithValid(\n {\n building,\n measurements: undefined,\n },\n isValid,\n );\n };\n\n const onReset = () => {\n setTriggered(false);\n if (isEdit) {\n setValue(editedData);\n } else {\n updateData(genDefaultData());\n }\n };\n\n const onSubmit = async event => {\n event.preventDefault();\n const toValidate = ['building', 'periodType', 'measurements'];\n if (_value.periodType && periods[_value.periodType].element)\n toValidate.push(_value.periodType);\n const isValid = toValidate\n .map(key =>\n validate({\n required: true,\n value: _value[key],\n rules: setupSettings[key] ? setupSettings[key].rules || [] : [],\n }),\n )\n .reduce(\n (prev, { validateStatus }) => prev && validateStatus !== 'error',\n true,\n );\n if (!isValid) {\n setTriggered(true);\n } else {\n const request = {\n building: _value.building,\n ...periods[_value.periodType].formatter(\n _value[_value.periodType],\n now,\n ),\n measurements: isEdit\n ? filter(\n _value.measurements,\n e => !editedData.measurements.includes(e),\n )\n : _value.measurements,\n };\n if (request.measurements.length) {\n startAsyncTask(\n 'Pobieranie danych z bazy. Operacja zajmuje dużo czasu przy obszernym zapytaniu.',\n );\n await wrapRequest(() => getLineChartData(request), {\n onError: (error = {}) => {\n message.error(\n error.data ||\n 'Nie udało się pobrać danych do wykresów. Jeśli sytuacja się będzie powtarzać, prośba o kontakt z administracją serwisu.',\n );\n },\n onSuccess: data => {\n loadData({\n fields: {\n ..._value,\n description: getBuildingShortcut(_value.building),\n measurementsLabels: request.measurements.map(m =>\n getMeasurementLabel(\n m,\n buildingsMeasurements[_value.building],\n ),\n ),\n },\n data,\n });\n onClose();\n onReset();\n },\n });\n finishAsyncTask();\n } else {\n onClose();\n onReset();\n }\n }\n };\n\n return (\n \n \n {isAdmin && (\n \n \n \n \n \n {periods[_value.periodType].element()}\n \n )}\n \n \n \n \n Zresetuj\n \n \n {isEdit ? 'Aktualizuj' : 'Dodaj dane'}\n \n \n \n );\n },\n {\n propTypes: {\n mode: PropTypes.oneOf([MODES.EDIT, MODES.LOAD]).isRequired,\n editedData: PropTypes.shape({\n building: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n }),\n onClose: PropTypes.func,\n loadData: PropTypes.func,\n updateData: PropTypes.func,\n },\n },\n);\n\nconst setupSettings = {\n user: {\n label: 'Wybór gminy',\n disableOnEdit: true,\n hasIcon: true,\n },\n building: {\n label: 'Wybór budynku',\n required: true,\n disableOnEdit: true,\n hasIcon: true,\n },\n periodType: {\n label: 'Wybór zakresu danych',\n required: true,\n disableOnEdit: true,\n },\n measurements: {\n label: 'Wybór możliwych danych',\n required: true,\n rules: [\n {\n validate: v => v.length,\n errorMessage: 'Wybierz min. 1 zestaw danych',\n },\n ],\n },\n};\n\nconst PeriodSelect = ({ ...props }) => (\n \n {Object.keys(periods).map(e => (\n \n {periods[e].description}\n \n ))}\n \n);\n\nconst extractPeriodSettings = ({ label, rules }) => ({\n label,\n rules,\n required: true,\n disableOnEdit: true,\n});\n\nconst periods = {\n day: {\n description: '1 dzien',\n formatter: (value, now) => ({\n from: now\n .clone()\n .subtract(1, 'days')\n .format(),\n to: now.format(),\n }),\n },\n days3: {\n description: '3 dni',\n formatter: (value, now) => ({\n from: now\n .clone()\n .subtract(3, 'days')\n .format(),\n to: now.format(),\n }),\n },\n week: {\n description: '1 tydzień',\n formatter: (value, now) => ({\n from: now\n .clone()\n .subtract(1, 'weeks')\n .format(),\n to: now.format(),\n }),\n },\n weeks2: {\n description: '2 tygodnie',\n formatter: (value, now) => ({\n from: now\n .clone()\n .subtract(2, 'weeks')\n .format(),\n to: now.format(),\n }),\n },\n month: {\n description: '1 miesiąc',\n formatter: (value, now) => ({\n from: now\n .clone()\n .subtract(1, 'months')\n .format(),\n to: now.format(),\n }),\n },\n months3: {\n description: '3 miesiące',\n formatter: (value, now) => ({\n from: now\n .clone()\n .subtract(3, 'months')\n .format(),\n to: now.format(),\n }),\n },\n year: {\n description: '1 rok',\n formatter: (value, now) => ({\n from: now\n .clone()\n .subtract(1, 'years')\n .format(),\n to: now.format(),\n }),\n },\n userDefined: {\n description: 'Inny zakres',\n default: [moment().subtract(1, 'months'), moment()],\n label: 'Wybór zakresu dni',\n name: 'range-picker',\n element: ({ ...props }) => (\n \n \n {data.map(({id, fields}) => (\n this.openDialogEdit(id)}>edytuj,\n this.removeData(id)}>usuń ,\n ]}\n >\n \n \n this.updateLoadedData(this.state.editedData, value)\n : this.loadData}\n updateData={value =>\n this.updateData(this.state.editedData, value)\n }\n />\n \n \n );\n }\n}\n\nexport default LoadData;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { Select } from 'antd';\n\nconst { Option } = Select;\n\nexport default ({ ...props }) => (\n \n {colors.map(({ color, description }) => (\n \n \n {description} \n
\n \n ))}\n \n);\n\nconst ColorSelectColor = styled.div`\n background: ${({ color }) => color};\n display: inline-block;\n vertical-align: text-bottom;\n height: 18px;\n width: 18px;\n border-radius: 50%;\n margin-right: 4px;\n`;\n\nexport const colors = [\n {\n description: 'Ciemnoniebieski',\n color: '#063951',\n },\n {\n description: 'Ciemnoczerwony',\n color: '#C13015',\n },\n {\n description: 'Pomarańczowy',\n color: '#E36F13',\n },\n {\n description: 'Jasnoniebieski',\n color: '#0D95BC',\n },\n {\n description: 'Żółty',\n color: '#E3CB38',\n },\n {\n description: 'Zielonkawy',\n color: '#A2B969',\n },\n {\n description: 'Ciemnoszary',\n color: '#333',\n },\n {\n description: 'Czarny',\n color: 'black',\n },\n {\n description: 'Niebieski',\n color: 'blue',\n },\n {\n description: 'Czerwony',\n color: 'red',\n },\n {\n description: 'Zielony',\n color: '#556B3E',\n },\n];\n\nexport const multiChartLineColors = [\n {\n color: '#0E4194',\n },\n {\n color: '#10C8CA',\n },\n {\n color: '#7FD2BE',\n },\n {\n color: '#4462ba',\n },\n {\n color: '#2490be',\n },\n {\n color: '#03cca7',\n },\n];\n","import React from \"react\";\nimport styled from \"styled-components\";\n\nexport default ({ visible, ...props }) => (\n \n {data.map(({ id, description }) => (\n \n {description}\n \n ))}\n \n ),\n {\n propTypes: {\n data: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string.isRequired,\n description: PropTypes.string.isRequired,\n }),\n ),\n },\n },\n );\n\nexport const handleAxisData = ({yAxises}) => {\n const axisData = yAxises.map(({id, fields}) => ({\n id,\n description: fields.description,\n }));\n return {\n axisData,\n defaultAxisData: axisData[0].id,\n };\n };\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { TreeSelect } from \"antd\";\n\nimport { generateDataDescription, generateDataSource } from '../scenes/ChartCreate/ChartSetup/utils/constants';\nimport { DataType } from \"../scenes/ChartCreate/ChartSetup/utils/types\";\n\nimport MathParser from \"../../../components/MathParser\";\n\nexport default Object.assign(\n ({loadedData, ...props}) => {\n const genTreeData = () => {\n return loadedData.map(({id, fields}) => ({\n title: fields.description,\n value: `${id}`,\n selectable: false,\n key: `${id}`,\n children: fields.measurements.map(set => ({\n title: {generateDataDescription(fields.description, set)} ,\n value: generateDataSource(id, set),\n key: generateDataSource(id, set),\n })),\n }));\n };\n return (\n \n \n ));\n\nclass DelayedExecution extends Component {\n constructor(props) {\n super(props);\n this.state = {\n waiting: false,\n renderedValue: props.value,\n }\n this.subscriber = null;\n }\n\n subscriber;\n\n static propTypes = {\n delay: PropTypes.number,\n onChange: PropTypes.func.isRequired,\n }\n\n static defaultProps = {\n delay: 3000,\n }\n\n componentDidUpdate(prevProps) {\n if(!this.subscriber && !this.state.waiting && this.props.value !== this.state.renderedValue) {\n this.setState({\n waiting: true,\n ...(prevProps.value !== this.props.value && {renderedValue: this.props.value}),\n });\n this.subscriber = new Subscripter();\n this.subscriber.subscribe(\n async () => {await this.awaitDelay()},\n () => this.executeDelayedUpdate(false),\n () => this.executeDelayedUpdate(true),\n );\n }\n }\n\n async awaitDelay() {\n await sleep(this.props.delay);\n }\n\n executeDelayedUpdate(canceled) {\n this.subscriber.unsubscribe();\n this.subscriber = null;\n this.props.onChange(this.state.renderedValue);\n if(!canceled) {\n this.setState({\n waiting: false,\n });\n }\n }\n\n componentWillUnmount() {\n if(this.subscriber) {\n this.subscriber.unsubscribe();\n }\n }\n\n selfUpdate(value) {\n this.setState({\n renderedValue: value,\n })\n }\n\n wrappedOnChange(v) {\n let value = v;\n if(v.target){\n if(v.target.type === \"checkbox\") {\n value = v.target.checked;\n }\n if(v.target.type === \"text\") {\n value = v.target.value;\n }\n }\n this.selfUpdate(value);\n }\n\n render() {\n return React.cloneElement(this.props.children, {\n onChange: (v) => this.wrappedOnChange(v),\n value: this.state.renderedValue,\n });\n }\n}\n\n// Eksperymentalny wrapper do zapobiegania wielokrotnych updatom owrapowanego\n// componentu - jak opóźniony input do tekstu\nexport const withDelayedUpdate = (Element) => (\n({delay = 400, value, onChange, ...props}) => (\n \n ));\n","import React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport {\n Checkbox,\n Input,\n Button,\n} from \"antd\";\n\nimport { UsedDataType, DataType, ConfigType, EditUsedDataType } from \"../utils/types\";\nimport { MODES } from \"../utils/constants\";\n\nimport FormItemWrapper, { validate } from \"../../../../../../components/FormItemWrapper\";\nimport ColorSelect from \"../../../../../../components/ColorSelect\";\nimport VisibilitySwitch from \"../../../../../../components/VisibilitySwitch\";\nimport AxisSelect, { handleAxisData } from \"../../../../components/AxisSelect\";\nimport { FormFooter, FormInner, StyledFrom } from \"../../../../components/StyledForm\";\nimport PathSelect from \"../../../../components/PathSelect\";\nimport { withDelayedUpdate } from \"../../../../../../utils/delayed\";\n\nconst DelayedInput = withDelayedUpdate(Input);\n\nconst UseDataForm = Object.assign(\n ({\n dataSource,\n editedData,\n loadedData,\n onClose,\n config,\n updateData,\n }) => {\n const isEdit = true;\n\n const [triggered, setTriggered] = useState(false);\n const [_value, setValue] = useState(editedData);\n\n const formSettings = {\n isEdit,\n triggered,\n };\n \n useEffect(() => {\n setValue(editedData);\n }, [editedData]);\n\n const updateWithValid = ((data, isValid) =>\n isValid ? updateData({...editedData, ...data}): setValue({..._value, ...data}));\n\n const update = (key) => ((data, isValid) => updateWithValid({[key]: data}, isValid));\n\n const changeDotted = (dotted, isValid) =>\n updateWithValid({\n dotted,\n ...(dotted && {\n dashed: false,\n }),\n }, isValid);\n\n const onReset = () => {\n setTriggered(false);\n setValue(editedData);\n }\n\n const onSubmit = async (event) => {\n event.preventDefault();\n const toValidate = [\n 'description',\n 'axis',\n 'lineColor',\n ];\n const isValid = toValidate.map((key) => validate({\n required: true,\n value: _value[key],\n rules: setupSettings[key] ? (setupSettings[key].rules || []) : [],\n })).reduce((prev, {validateStatus}) => prev && validateStatus !== 'error', true);\n if(!isValid) {\n setTriggered(true);\n }\n else {\n onClose();\n onReset();\n }\n }\n\n const { axisData } = handleAxisData(config);\n\n return (\n \n \n \n \n \n \n \n Pokaż linię regresji \n \n \n Pokaż jako zbiór punktów \n \n \n \n Użyj przerywanej linii \n \n \n \n \n \n Zresetuj\n \n \n {isEdit ? \"Aktualizuj\" : \"Dodaj dane\"}\n \n \n \n );\n},\n{\n propTypes: {\n dataSource: PropTypes.string.isRequired,\n mode: PropTypes.oneOf([MODES.EDIT, MODES.LOAD]).isRequired,\n editedData: PropTypes.shape(EditUsedDataType).isRequired,\n loadedData: PropTypes.arrayOf(PropTypes.shape(DataType)).isRequired,\n onClose: PropTypes.func.isRequired,\n config: PropTypes.shape(ConfigType),\n updateData: PropTypes.func.isRequired,\n },\n});\n\nconst setupSettings = {\n description: {\n label: \"Opis danych\",\n required: true,\n rules: [\n {\n validate: (v) => v.length >= 3,\n errorMessage: 'Wymagane min. 3 znaki',\n },\n {\n validate: (v) => v.length <= 60,\n errorMessage: 'Maksymalnie 60 znaków',\n },\n ],\n },\n axis: {\n label: \"Oś odniesienia\",\n required: true,\n },\n showRegresion: {},\n dotted: {},\n dashed: {},\n lineColor: {\n label: \"Kolor na wykresie\",\n required: true,\n },\n};\n\nexport default Object.assign(\n({mode, editedData, loadedData, config, onClose, updateData}) => {\n\nconst onUpdateFields = changedFields => {\n if (changedFields !== editedData.fields) {\n updateData({\n ...editedData,\n fields: { ...editedData.fields, ...changedFields },\n });\n }\n};\n return (\n \n \n {data.map(({dataSource, fields, show}) => {\n const reason = getDisableReason(dataSource, loadedData, config.xAxis.xKey);\n return (\n this.openDialogEdit(dataSource)}>edytuj,\n ]}\n >\n this.changeShow(dataSource, checked)}\n />}\n />\n )},\n )}\n \n {this.state.editedData !== null && \n \n this.updateData(this.state.editedData, value)\n }\n />\n }\n \n );\n }\n}\n\nexport default UseData;\n\nconst StyledDetails = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n`;\n\nconst StyledSwitch = styled.div`\n flex: 0;\n padding: 2px 0;\n`;\n\nconst DetailsTitle = styled.div`\n flex: 1;\n margin-right: 16px;\n`;\n\nconst StyledWaringTip = styled.div`\n font-size: 1.2rem;\n padding-right: 16px;\n color: ${({reason}) => formatReasonColor(reason)};\n`;\n\nconst Details = ({description, show, onChange, reason}) =>\n \n {reason &&\n \n \n \n \n }\n \n \n {description}\n \n \n \n \n \n \n","import React from \"react\";\nimport { Select } from \"antd\";\n\nconst { Option } = Select;\n\nexport default ({...props}) => (\n \n \n Po lewej stronie\n \n \n Po prawej stronie\n \n \n);\n","import React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Checkbox, Form, Row, Col, Input, Button } from \"antd\";\n\nimport { yAxisType } from \"../utils/types\";\nimport { MODES } from \"../utils/constants\";\n\nimport FormItemWrapper, { validate } from \"../../../../../../components/FormItemWrapper\";\nimport { FormFooter, FormInner, StyledFrom } from \"../../../../components/StyledForm\";\nimport AxisSideSelect from \"../../../../components/AxisSideSelect\";\n\nimport { withDelayedUpdate } from \"../../../../../../utils/delayed\";\n\nconst DelayedInput = withDelayedUpdate(Input);\n\nconst AxisForm = Object.assign(\n({mode, editedData, onClose, loadData, updateData}) => {\n const isEdit = mode === MODES.EDIT;\n\n const [triggered, setTriggered] = useState(false);\n const [_value, setValue] = useState(editedData);\n\n const formSettings = {\n isEdit,\n triggered,\n };\n\n useEffect(() => {\n setValue(editedData);\n }, [editedData]);\n\n const updateWithValid = ((data, isValid) =>\n isValid ? updateData({...editedData, ...data}): setValue({..._value, ...data}));\n\n const update = (key) => ((data, isValid) => updateWithValid({[key]: data}, isValid));\n\n const onReset = () => {\n setTriggered(false);\n if(isEdit) {\n setValue(editedData);\n }\n else {\n updateData(genDefaultData());\n }\n }\n\n const onSubmit = async (event) => {\n event.preventDefault();\n const toValidate = [\n 'description',\n 'side',\n 'unit',\n 'rangeFrom',\n 'rangeTo',\n 'rangeSpan',\n ];\n const isValid = toValidate.map((key) => validate({\n ...setupSettings[key],\n value: _value[key],\n rules: setupSettings[key] ? (setupSettings[key].rules || []) : [],\n })).reduce((prev, {validateStatus}) => prev && validateStatus !== 'error', true);\n if(!isValid) {\n setTriggered(true);\n }\n else {\n if(isEdit) {\n updateData(_value);\n } else {\n loadData(_value);\n }\n onClose();\n onReset();\n }\n }\n\n return (\n \n \n \n Pokaż oś na wykresie \n \n \n \n Pokaż nazwę osi na wykresie \n \n \n \n \n \n \n \n \n
\n \n \n \n \n Zresetuj\n \n \n {isEdit ? \"Aktualizuj\" : \"Dodaj oś\"}\n \n \n \n );\n},\n{\n propTypes: {\n mode: PropTypes.oneOf([MODES.EDIT, MODES.LOAD]).isRequired,\n editedData: PropTypes.shape(yAxisType).isRequired,\n onClose: PropTypes.func.isRequired,\n loadData: PropTypes.func.isRequired,\n updateData: PropTypes.func.isRequired,\n },\n});\n\nconst setupSettings = {\n showAxis: {},\n description: {\n label: \"Opis osi\",\n required: true,\n rules: [\n {\n validate: (v) => v.length >= 3,\n errorMessage: 'Wymagane min. 3 znaki',\n },\n {\n validate: (v) => v.length <= 20,\n errorMessage: 'Maksymalnie 20 znaków',\n },\n ],\n },\n showDescription: {},\n side: {\n label: \"Miejsce wyświetlania\",\n required: true,\n },\n unit: {\n label: \"Jednostka\",\n required: false,\n rules: [\n {\n validate: (v) => v.length <= 10,\n errorMessage: 'Maksymalnie 10 znaków',\n },\n ],\n },\n rangeFrom: {\n label: \"Od\",\n required: true,\n },\n rangeTo: {\n label: \"Do\",\n required: true,\n },\n rangeSpan: {\n label: \"Krok\",\n required: true,\n },\n};\n\nconst genDefaultData = () => ({\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"\",\n showDescription: false,\n unit: \"\",\n rangeFrom: \"auto\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n});\n\nexport default Object.assign(\n({mode, editedAxis, onClose, loadData, updateData}) => {\n const isEdit = mode === MODES.EDIT;\n const [newData, updateNewData] = useState(genDefaultData());\n\n return (\n \n \n {Object.keys(measurements).map(key => (\n \n \n {\n key === \"time\"\n ? (\n )\n : (warning =>\n \n \n )(measurements[key] !== loadedData.length)\n }\n \n {key.includes('_')\n ? getMultipleLabelFromLoaded(key, loadedData)\n : getMeasurementLabel(key, [])}\n \n \n ),\n )}\n \n {(props.value && (measurements[props.value] !== loadedData.length)) &&\n \n Część danych nie zostanie ujęta na wykresie.\n }\n \n );\n}\n\nconst StyledOption = styled.div`\n min-width: 360px;\n display: flex;\n`;\n\nconst StyledPlaceholder = styled.div`\n flex: 32px 0 0;\n color: ${({warning}) => warning ? '#faad14' : '#52c41a'};\n`;\n\nconst Warning = styled.div`\n position: absolute;\n bottom: -24px;\n color: #faad14;\n`;\n\nconst StyledSelect = styled.div`\n position: relative;\n`;\n","import React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport {\n Button,\n Checkbox,\n Col,\n Form,\n Input,\n InputNumber,\n Row,\n} from \"antd\";\n\nimport FormItemWrapper, { validate } from \"../../../../../../components/FormItemWrapper\";\nimport SelectxKey from \"../../../../components/SelectxKey\";\nimport { FormFooter, FormInner, StyledFrom } from \"../../../../components/StyledForm\";\nimport ColorSelect from \"../../../../../../components/ColorSelect\";\nimport { xAxisType, DataType, UsedDataType } from \"../utils/types\";\nimport VisibilitySwitch from \"../../../../../../components/VisibilitySwitch\";\nimport { withDelayedUpdate } from \"../../../../../../utils/delayed\";\nimport { getMeasurementLabel, getMeasurementUnit, getMultipleLabelFromLoaded } from \"../../../../components/MeasurementsPicker\";\n\nconst DelayedInput = withDelayedUpdate(Input);\n\n// TODO usuniecie valueKey z formy i przeniesienei do setup\nconst XAxisForm = Object.assign(\n({editedData, loadedData, usedData, onClose, updateData}) => {\n\n const [triggered, setTriggered] = useState(false);\n const [_value, setValue] = useState(editedData);\n\n const formSettings = {\n isEdit: true,\n triggered,\n };\n\n useEffect(() => {\n setValue(editedData);\n }, [editedData]);\n\n const updateWithValid = ((data, isValid) =>\n isValid ? updateData({...editedData, ...data}): setValue({..._value, ...data}));\n\n const update = (key) => ((data, isValid) => updateWithValid({[key]: data}, isValid));\n\n const onReset = () => {\n setTriggered(false);\n setValue(editedData);\n }\n\n const onChangeXKey = (data, isValid) =>\n updateWithValid({\n xKey: data,\n ...(isValid && {\n description: (data.includes('_')\n ? getMultipleLabelFromLoaded(data, loadedData)\n : getMeasurementLabel(data, [])),\n ...(data !== 'time' && {\n unit: getMeasurementUnit(data),\n }),\n }),\n }, isValid);\n\n const onSubmit = async (event) => {\n event.preventDefault();\n const toValidate = [\n 'description',\n 'color',\n 'xKey',\n 'unit',\n ];\n const isValid = toValidate.map((key) => validate({\n ...setupSettings[key],\n value: _value[key],\n rules: setupSettings[key] ? (setupSettings[key].rules || []) : [],\n })).reduce((prev, {validateStatus}) => prev && validateStatus !== 'error', true);\n if(!isValid) {\n setTriggered(true);\n }\n else {\n onClose();\n onReset();\n }\n }\n\n return (\n \n \n \n \n Pokaż nazwę osi na wykresie \n \n \n \n
\n \n \n \n \n \n Pokaż godzinę \n \n \n
\n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n Zresetuj\n \n \n Zakończ\n \n \n \n );\n},\n{\n propTypes: {\n editedData: PropTypes.shape(xAxisType).isRequired,\n loadedData: PropTypes.arrayOf(PropTypes.shape(DataType)).isRequired,\n usedData: PropTypes.arrayOf(PropTypes.shape(UsedDataType)).isRequired,\n onClose: PropTypes.func.isRequired,\n updateData: PropTypes.func.isRequired,\n },\n});\n\nconst setupSettings = {\n description: {\n label: \"Opis osi\",\n required: true,\n rules: [\n {\n validate: (v) => v.length >= 3,\n errorMessage: 'Wymagane min. 3 znaki',\n },\n {\n validate: (v) => v.length <= 20,\n errorMessage: 'Maksymalnie 20 znaków',\n },\n ],\n },\n showDescription: {},\n color: {\n label: \"Kolor osi\",\n required: true,\n },\n xKey: {\n label: 'Dane na osi X',\n required: true,\n },\n datesNumber: {\n label: \"Minimalna ilość dat na osi\",\n help: \"Wyświetlna liczba może być mniejsza dla krótkich okresów\",\n rules: [\n {\n validate: (v) => v >= 2,\n errorMessage: 'Wymagane min. 2 daty',\n },\n {\n validate: (v) => v <= 8,\n errorMessage: 'Maksymalnie 8 dat',\n },\n ],\n },\n withTime: {},\n unit: {\n label: \"Jednostka\",\n required: false,\n rules: [\n {\n validate: (v) => v.length <= 10,\n errorMessage: 'Maksymalnie 10 znaków',\n },\n ],\n },\n rangeFrom: {\n label: \"Od\",\n required: true,\n },\n rangeTo: {\n label: \"Do\",\n required: true,\n },\n rangeSpan: {\n label: \"Krok\",\n required: true,\n },\n};\n\nexport default Object.assign(\n({editedAxis, loadedData, usedData, onClose, updateData}) => {\n return (\n \n \n \n \n Pokaż tytuł na wykresie \n \n \n Pokaż legendę na wykresie \n \n \n Pokaż poziome linie siatki \n \n \n Pokaż pionowe linie siatki \n \n \n \n \n Zresetuj\n \n \n Zakończ\n \n \n \n );\n},\n{\n propTypes: {\n editedData: PropTypes.shape(settingsType).isRequired,\n onClose: PropTypes.func.isRequired,\n updateData: PropTypes.func.isRequired,\n },\n});\n\nconst setupSettings = {\n title: {\n label: \"Tytuł wykresu\",\n rules: [\n {\n validate: (v) => v.length <= 60,\n errorMessage: 'Maksymalnie 60 znaków',\n },\n ],\n },\n showTitle: {},\n showLegend: {},\n horizontalGrid: {},\n verticalGrid: {},\n};\n\nexport default Object.assign(\n({ settings, onClose, updateData }) => {\n const onUpdateFields = changedFields => {\n if (changedFields !== settings) {\n updateData({\n ...settings,\n ...changedFields,\n });\n }\n };\n\n return (\n \n \n edytuj,\n ]}\n >\n \n \n Oś pozioma\n \n \n edytuj,\n ]}\n >\n \n \n Osie pionowe\n \n \n {config.yAxises.map(({id, fields}) => (\n this.openDialogYAxis(id)}>edytuj,\n this.removeAxis(id)} disabled={!this.canRemove(id)}>usuń ,\n ]}\n >\n \n this.openDialogYAxis(null)}\n />\n \n \n \n this.updateAxis(newAxis, editedAxis)}\n editedAxis={isEdit ? config.yAxises[editedAxis] : {}}\n />\n \n \n );\n }\n}\n\nexport default ConfigChart;\n\nconst ConfigChartSection = styled.div`\n padding: 8px 0;\n margin-top: 16px;\n font-weight: bold;\n background: linear-gradient(to right, #999 0%, #999 50%, #fff 50%, #fff 100%);\n background-position: top right;\n background-repeat: repeat-x;\n background-size: 10px 1px;\n`;\n","import { sortBy } from 'lodash';\n\nimport { colors } from '../../../../../../components/ColorSelect';\n\nexport const defaultChartConfig = {\n settings: {\n title: \"\",\n showTitle: false,\n showLegend: true,\n horizontalGrid: true,\n verticalGrid: true,\n // dwie poniższe nieedytowalne\n stopInteractive: false,\n stopAnimation: true,\n },\n xAxis: {\n description: \"Czas\",\n showDescription: false,\n color: \"#333\",\n datesNumber: 5,\n withTime: true,\n xKey: \"time\",\n unit: \"\",\n rangeFrom: \"auto\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n yAxises: [\n {\n id: \"0\",\n fields: {\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"Oś Y\",\n showDescription: false,\n unit: \"\",\n rangeFrom: \"auto\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n },\n ],\n};\n\nexport const nextColorsPallete = (alreadyUsed) => {\n const possible = colors.reduce((prev, color, id) => ({\n ...prev,\n [color.color]: {\n counter: 0,\n id,\n },\n }), {});\n alreadyUsed.forEach(({fields}) => {\n possible[fields.lineColor].counter += 1;\n });\n const pallete = Object.keys(possible).map(key => ({\n color: key,\n counter: possible[key].counter,\n id: possible[key].id,\n }))\n return sortBy(pallete, ['counter', 'id']);\n}\n\nexport const getUsedData = ({dataSource, description, colorPallete, yAxises}, idx) => ({\n dataSource,\n fields: {\n description,\n axis: yAxises[0].id,\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: colorPallete[idx % colorPallete.length].color,\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n },\n show: true,\n});\n","import React, { Component } from \"react\";\nimport styled from \"styled-components\";\nimport PropTypes from \"prop-types\";\nimport { union, filter, sortBy } from \"lodash\";\nimport { Collapse, message } from \"antd\";\n\nimport LoadData from \"./MenuElements/LoadData\";\nimport UseData from \"./MenuElements/UseData\";\nimport ConfigChart from \"./MenuElements/ConfigChart\";\n\nimport {\n ConfigType,\n DataType,\n UsedDataType,\n} from './utils/types';\nimport { extractEntry, generateDataSourcesSet } from \"./utils/constants\";\nimport { getUsedData, nextColorsPallete } from \"./utils/defaults\";\n\nconst Panel = Collapse.Panel;\n\nconst DisableLegendAlert = 7;\n\nconst getActiveStatus = ({ loadedData, usedData }) => {\n const isActiveUsedData = loadedData.length !== 0;\n const isActiveChartConfig = usedData.length !== 0;\n return {\n isActiveUsedData,\n isActiveChartConfig,\n };\n};\n\nclass ChartSetup extends Component {\n // TODO przepisac na funkcjonalny\n constructor(props) {\n super(props);\n const { isActiveUsedData, isActiveChartConfig } = getActiveStatus(props);\n const activeKey = [\"loadedData\"];\n if (isActiveUsedData) {\n activeKey.push(\"usedData\");\n }\n if (isActiveChartConfig) {\n activeKey.push(\"chartConfig\");\n }\n this.state = { activeKey };\n }\n\n static propTypes = {\n chartConfig: PropTypes.shape(ConfigType).isRequired,\n loadedData: PropTypes.arrayOf(PropTypes.shape(DataType)).isRequired,\n update: PropTypes.func.isRequired,\n usedData: PropTypes.arrayOf(PropTypes.shape(UsedDataType)).isRequired,\n };\n\n componentDidUpdate(prevProps) {\n const updateActiveKeys = [];\n const removeActiveKeys = [];\n const activeStatus = getActiveStatus(this.props);\n const prevActiveStatus = getActiveStatus(prevProps);\n if (!prevActiveStatus.isActiveUsedData && activeStatus.isActiveUsedData) {\n updateActiveKeys.push(\"usedData\");\n }\n if (prevActiveStatus.isActiveUsedData && !activeStatus.isActiveUsedData) {\n removeActiveKeys.push(\"usedData\");\n }\n if (\n !prevActiveStatus.isActiveChartConfig &&\n activeStatus.isActiveChartConfig\n ) {\n updateActiveKeys.push(\"chartConfig\");\n }\n if (\n prevActiveStatus.isActiveChartConfig &&\n !activeStatus.isActiveChartConfig\n ) {\n removeActiveKeys.push(\"chartConfig\");\n }\n if (updateActiveKeys.length + removeActiveKeys.length > 0) {\n const result = union([...this.state.activeKey], updateActiveKeys);\n this.setState({\n activeKey: filter(result, e => !removeActiveKeys.includes(e))\n });\n }\n }\n\n changeActiveKey = newActiveKey => {\n this.setState({\n activeKey: newActiveKey,\n });\n };\n\n update = (key, newValue) => {\n this.setState({\n [key]: newValue,\n });\n };\n\n containsDataSource = (dataSource, loadedData) => {\n const [id, measurement] = extractEntry(dataSource);\n const fid = loadedData.findIndex(data => data.id === id);\n if(fid === -1) return false;\n return loadedData[fid].fields.measurements.includes(measurement);\n }\n\n updateLoadedData = newValue => {\n const filteredOld = filter(this.props.usedData,\n used => this.containsDataSource(used.dataSource, newValue));\n const allNew = newValue.reduce((prev, loaded) =>\n [...prev, ...generateDataSourcesSet(loaded)], []);\n const toAdd = filter(allNew,\n path => !filteredOld.find(({dataSource}) => path.dataSource === dataSource));\n const colorPallete = nextColorsPallete(filteredOld);\n const newUsedData = [...filteredOld, ...toAdd.map(\n ({dataSource, description}, idx) => getUsedData({\n dataSource,\n description,\n colorPallete,\n yAxises: this.props.chartConfig.yAxises,\n }, idx))];\n const canLegend = newUsedData.filter(e => e.show).length < DisableLegendAlert;\n if(!canLegend && this.props.chartConfig.settings) {\n message.warning('Ze względu na dużą liczbę danych ukryta została legenda. Można ją przywrócić w \"Konfiguracji ogólnej wykresu\"');\n }\n this.props.update({\n chartConfig: {\n ...this.props.chartConfig,\n settings: {\n ...this.props.chartConfig.settings,\n showLegend: this.props.chartConfig.settings && canLegend,\n },\n },\n loadedData: newValue,\n usedData: sortBy(newUsedData, ['dataSource']),\n });\n } \n\n updateUsedData = newValue => this.props.update({\n usedData: newValue,\n });\n\n updateChartConfig = newValue => this.props.update({\n chartConfig: newValue,\n });\n\n render() {\n const { loadedData, usedData, chartConfig, now } = this.props;\n const { isActiveUsedData, isActiveChartConfig } = getActiveStatus(\n this.props,\n );\n return (\n \n \n \n \n \n \n \n );\n }\n}\n\nexport default ChartSetup;\n\nconst StyledChartSetup = styled.div`\n & .ant-collapse-header {\n font-size: 1rem;\n }\n`;\n","import { filter, isNil } from \"lodash\";\n\nconst getAllDataFromKey = (data, key) =>\n filter(data, e => !isNil(e[key])).map(item => item[key]);\n\nexport const filterDataByKeys = (data, keys = []) =>\n filter(data, e => keys.reduce((prev, k) => prev && !isNil(e[k]), true));\n\nexport const dataFromAxis = (data, usedData, axis, maxMin, minMax) =>\n filter(usedData, e => e.axis === axis).reduce(\n (prev, used) => [...prev, ...getAllDataFromKey(data, used.dataSource)],\n [...(maxMin ? [maxMin] : []), ...(minMax ? [minMax] : [])],\n );\n\nexport const dataFromLimits = (limits = [], axis) =>\n filter(limits, e=> e.axis === axis).map(({value}) => value);\n\nexport const dataFromAreas = (areas = [], axis) =>\n filter(areas, e=> e.axis === axis).reduce((prev, {from, to}) => [...prev, from, to], []);\n\nexport const hasLeftAxis = (yAxises) =>\nyAxises.reduce((prev, {side}) => prev || side === \"left\", false);\n\nexport const hasRightAxis = (yAxises) =>\nyAxises.reduce((prev, {side}) => prev || side === \"right\", false);\n\nexport const dataFromXAxis = (data, xKey) => getAllDataFromKey(data, xKey);\n\nexport const isDataFunction = (data, xKey, yKey) => {\n let y = null;\n let x = null;\n for (let i = 0; i < data.length; i += 1) {\n if (data[i][xKey] && data[i][yKey]) {\n if (data[i][xKey] === x && data[i][yKey] !== y) {\n return false;\n }\n x = data[i][xKey];\n y = data[i][yKey];\n }\n }\n return true;\n };\n\n const TIME = \"time\";\n\n export const isTimeChart = xKey => xKey === TIME;\n","import { range } from \"lodash\";\nimport moment from \"moment\";\nimport { filterDataByKeys } from \"./filters\";\n\nconst AUTO = \"auto\";\n\n// TODO - blad, gdy dane na osi są stałe\n// TODO - blad, gdy withTime + za mało jest danych na wymaganą liczbę ticków\n\nconst autoRanges = [\n {\n limit: 2,\n span: 0.5,\n },\n {\n limit: 4,\n span: 1,\n },\n {\n limit: 7.5,\n span: 2,\n },\n {\n limit: 10,\n span: 2.5,\n },\n];\nconst minPower = -1;\nconst maxTickNumber = 16;\n\nconst calculatePower = ({ min, max }) => {\n const scope = max - min;\n const logRange = Math.max(Math.floor(Math.log10(scope)), minPower);\n return 10**logRange;\n};\n\nconst calculateSpan = ({ min, max }) => {\n const power = calculatePower({ min, max });\n const digit = (max - min) / power;\n let i = 0;\n while (digit > autoRanges[i].limit && i + 1 < autoRanges.length) {\n i += 1;\n }\n return power * autoRanges[i].span;\n};\n\nconst minTick = ({ min }, span) => span * Math.floor(min / span);\nconst maxTick = ({ max }, span) => span * Math.ceil(max / span);\nconst minValue = minTick;\nconst maxValue = maxTick;\n\nconst formatRange = (scope, auto) =>\n scope === AUTO ? auto : Number.parseFloat(scope);\n\nconst getRangeFromData = values => ({\n min: Math.min(...values.filter(e => e !== undefined)),\n max: Math.max(...values.filter(e => e !== undefined)),\n});\n\nconst getTicks = ({ min, max }, span) => range(min, max + span / 2, span);\n\nexport const dateTicks = (data, { datesNumber, withTime }) => {\n if(data.length === 0) return {};\n const { min, max } = getRangeFromData(data);\n const start = moment.unix(min / 1000);\n const end = moment.unix(max / 1000);\n const duration = moment.duration(end.diff(start));\n const periods = withTime ? duration.asHours() : duration.asDays();\n const number = Math.min(periods, datesNumber - 1);\n if(Number.isNaN(number)) return {};\n if(number <= 0) return {};\n const span = Math.floor(periods / number);\n const result = [];\n const iter = moment(start);\n while (!iter.isAfter(end)) {\n result.push(iter.format(\"x\"));\n iter.add(span, withTime ? \"hours\" : \"day\");\n }\n return {\n domainMin: min,\n domainMax: max,\n ticks: result,\n };\n};\n\nconst normalizeInput = (input) => {\n if(input !== 'auto' && Number.isNaN(parseFloat(input))) {\n return 'auto';\n }\n return input;\n}\n\nexport const chartRangesFromConfig = (\n data,\n { rangeFrom, rangeTo, rangeSpan },\n) => {\n let autoRangeSpan = normalizeInput(rangeSpan);\n const autoRangeFrom = normalizeInput(rangeFrom);\n const autoRangeTo = normalizeInput(rangeTo);\n if(data.length === 0) return {};\n const { min, max } = getRangeFromData(data);\n let from = formatRange(autoRangeFrom, min);\n let to = formatRange(autoRangeTo, max);\n if( to < from) {\n const mem = from;\n from = to;\n to = mem;\n }\n let scope = {\n min: from,\n max: to,\n };\n if(rangeSpan !== 'auto' && (\n (rangeSpan <= 0) ||\n (rangeSpan * (maxTickNumber - 1) <= (to - from))\n )) {\n autoRangeSpan = 'auto';\n }\n const span = formatRange(autoRangeSpan, calculateSpan(scope));\n if(Number.isNaN(span)) return {};\n if(span <= 0) return {}\n if(to - from < span) {\n to += span;\n from -= span;\n scope = {\n min: from,\n max: to,\n };\n }\n return {\n domainMin: minValue(scope, span),\n domainMax: maxValue(scope, span),\n ticks: getTicks(\n {\n min: minTick(scope, span),\n max: maxTick(scope, span),\n },\n span,\n ),\n };\n};\n\nconst regresionData = (data, xKey, yKey) => {\n const n = data.length;\n let { sx, sy } = data.reduce(\n (prev, d) => ({\n sx: prev.sx + d[xKey],\n sy: prev.sy + d[yKey],\n }),\n {\n sx: 0,\n sy: 0,\n },\n );\n sx /= n;\n sy /= n;\n return {\n sx,\n sy,\n ...data.reduce(\n ({ rx2, ry2, rxy }, d) => ({\n rx2: rx2 + (d[xKey] - sx) * (d[xKey] - sx),\n ry2: ry2 + (d[yKey] - sy) * (d[yKey] - sy),\n rxy: rxy + (d[xKey] - sx) * (d[yKey] - sy),\n }),\n {\n rx2: 0,\n ry2: 0,\n rxy: 0,\n },\n ),\n };\n};\n\nexport const regresion = (data, xKey, yKey) => {\n if(data.length < 2) return {a: 0, b: 0, R2: 0};\n const { sx, sy, rx2, ry2, rxy } = regresionData(data, xKey, yKey);\n const a = rxy / rx2;\n if(Number.isNaN(a)) return {a: 0, b: 0, R2: 0};\n const b = sy - a * sx;\n const ss = data.reduce(\n (prev, d) => prev + (a * d[xKey] + b - sy) * (a * d[xKey] + b - sy),\n 0,\n );\n return {\n a,\n b,\n R2: ss / ry2,\n };\n};\n\nexport const generateRegresionKey = path => `REG_${path}`;\n\n// TODO dodanie Object.assign\nexport const addRegresionValues = (data, usedData, xKey, {domainMin, domainMax}) => {\n let nData = [...data];\n if(Number.isNaN(domainMax) || Number.isNaN(domainMin)) return nData;\n usedData\n .filter(e => e.showRegresion)\n .forEach(used => {\n const { dataSource } = used;\n const dataSet = filterDataByKeys(data, [dataSource, xKey]);\n used.regresion = regresion(dataSet, xKey, dataSource);\n const { a, b } = used.regresion;\n const regKey = generateRegresionKey(dataSource);\n nData = [\n {\n [xKey]: domainMin,\n [regKey]: a * domainMin + b,\n },\n ...nData,\n {\n [xKey]: domainMax,\n [regKey]: a * domainMax + b,\n },\n ];\n });\n return nData;\n};\n","import React, { Fragment } from \"react\";\nimport { filter } from \"lodash\";\nimport styled from 'styled-components';\n\nimport MathParser from \"../MathParser\";\nimport { isTimeChart } from \"./utils/filters\";\nimport { formatDate, formatDateTime, isFilledString } from \"../../utils/formaters\";\n\nexport default ({ usedData, xAxis, ranges }) => {\n const { xKey, withTime } = xAxis;\n const isTime = isTimeChart(xKey);\n const calculate = filter(usedData, e => e.showRegresion).map(\n ({ regresion, ...rest }) => {\n const { a, b } = regresion;\n let nb = b;\n const domainMin = ranges.domainMin || 0;\n let begin = 0;\n if (isTime) {\n nb += a * domainMin;\n begin = domainMin;\n }\n return {\n ...rest,\n regresion: {\n ...regresion,\n b: nb,\n begin,\n },\n };\n },\n );\n const msInHour = 1000 * 60 * 60;\n return calculate.length > 0 ? (\n \n {calculate.map(({ description, regresion, unit, dataSource }) => (\n \n \n <MathParser>\n {description}\n </MathParser>\n \n \n {isTime\n ? `( ${(\n regresion.a * (withTime ? msInHour : msInHour * 24)\n ).toExponential(4)} ) · czas + ${regresion.b.toFixed(2)}`\n : `${regresion.a.toExponential(4)} · x + ${regresion.b.toFixed(2)}`}\n \n {isTime &&\n \n \n {`Początek x=0 dla ${((formatter) => formatter(regresion.begin))(withTime ? formatDateTime : formatDate)}`}\n \n \n \n {`Jednostka przyrostu ${formatUnit(xAxis.unit, unit, isTime, withTime)}`}\n \n \n }\n \n {`R^2 ${regresion.R2.toFixed(4)}`} \n \n \n ))}\n \n ) : null;\n };\n\n const formatUnit = (unit, yUnit, isTime, withTime) => \n ((topUnit, lowerUnit, timeUnit) => `${topUnit}/${isTime ? timeUnit : lowerUnit}`)(\n isFilledString(yUnit) ? yUnit : \"1\",\n isFilledString(unit) ? unit : \"1\",\n withTime ? \"godzinę\" : \"dzień\",\n );\n\nexport const StyledRegresionSummary = styled.div`\n font-size: 0.9em;\n padding: 4px;\n`;\n\nconst RegresionValue = styled.div`\n & + & {\n margin-top: 4px;\n }\n`;\n\nconst Title = styled.div`\n font-size: 0.8em;\n font-weight: bold;\n margin-bottom: 4px;\n`;\n\nconst Value = styled.div``;\n","import React, { PureComponent } from \"react\";\nimport { XAxis } from \"recharts\";\nimport styled from 'styled-components';\n// imports\nimport MathParser from \"../MathParser\";\nimport { formatDate, formatHour } from \"../../utils/formaters\";\n\nconst defaultPadding = {\n left: 0,\n right: 10,\n};\n\nexport const DefaultAxis = ({\n dataKey,\n color,\n showDescription,\n description,\n ...props\n}) => (\n \n \n \n \n \n {`${description}${unit ? ` [${unit}]` : ''}`} \n \n \n \n \n \n );\n };\n\nconst calculateMiss = (value, {padding, ranges, width, hasLeft, hasRight}) => {\n const tickMaxHalf = 42;\n const {ticks, domainMax, domainMin } = ranges;\n if(Number.isNaN(domainMax) || Number.isNaN(domainMin) ||\n domainMax === undefined || domainMin === undefined ||\n !ticks || ticks.length === 0) return 0;\n if(value === ticks[0] && !hasLeft) {\n const left = (padding && padding.left) || 0;\n const position = width * (value - domainMin) / (domainMax - domainMin);\n return Math.max(0, tickMaxHalf - left - position);\n }\n if(value === ticks[ticks.length - 1] && !hasRight) {\n const right = (padding && padding.right) || 0;\n const position = width * (domainMax - value) / (domainMax - domainMin);\n return - Math.max(0, tickMaxHalf - right - position);\n }\n return 0;\n}\n\n class CustomizedTimeTick extends PureComponent {\n render() {\n const { x, y, textAnchor, payload, withTime, color, tickFormatter } = this.props;\n const {value} = payload;\n const miss = calculateMiss(value, this.props);\n const nx = x + miss;\n const dataFormatter = tickFormatter || formatDate;\n return (\n \n \n {dataFormatter(value)}\n \n {withTime && (\n \n {formatHour(value)}\n \n )}\n \n );\n }\n }\n \nconst xAxisHeight = (showDescription, withTime) =>\n 30 + (showDescription ? 18 : 0) + (withTime ? 14 : 0);\n\n const StyledLabel = styled.div`\n text-align: center;\n height: 100%;\n width: 100%;\n font-size: 13px;\n @media (max-width: 1600px) {\n font-size: 12px;\n }\n @media (max-width: 1440px) {\n font-size: 11px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n @media print {\n font-size: 16px !important;\n }\n `;\n\n const StyledLabelInner = styled.div`\n position: absolute;\n top: 50%;\n left: 50%;\n `;\n\n const StyledLabelTransform = styled.div`\n transform: translateX(-50%) translateY(-50%);\n white-space: nowrap;\n `;\n","import React from \"react\";\nimport { YAxis } from \"recharts\";\nimport styled from 'styled-components';\n// imports\nimport { chartRangesFromConfig } from \"./utils/calculate\";\nimport MathParser from \"../MathParser\";\n\nexport default ({\n description,\n showDescription,\n dataSpread,\n id,\n color,\n showAxis,\n side,\n unit,\n rangeFrom,\n rangeTo,\n rangeSpan,\n ...props\n }) => {\n const { domainMin, domainMax, ticks } = chartRangesFromConfig(dataSpread, {\n rangeFrom,\n rangeTo,\n rangeSpan,\n });\n return (\n parseFloat(tick.toFixed(2))}\n label={\n showDescription\n ? \n \n \n \n \n {`${description}${unit ? ` [${unit}]` : ''}`} \n \n \n \n \n \n );\n };\n\nconst calculateAxisWidth = (showDescription, ticks = []) =>\n ticks.reduce(\n (prev, tick) => Math.max(prev, tick.toString().length),\n 0) * 7 + (showDescription ? 15 : 0) + 20;\n\n\nconst StyledLabel = styled.div`\n text-align: center;\n height: 100%;\n width: 100%;\n font-size: 13px;\n @media (max-width: 1600px) {\n font-size: 12px;\n }\n @media (max-width: 1440px) {\n font-size: 11px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n @media print {\n font-size: 16px !important;\n }\n`;\n\nconst StyledLabelInner = styled.div`\n position: absolute;\n top: 50%;\n left: 50%;\n`;\n\nconst StyledLabelInnerRotate = styled.div`\n transform: translateX(-50%) translateY(-50%) rotate(-90.1deg);\n white-space: nowrap;\n`;\n","import React, { Fragment } from \"react\";\nimport styled from 'styled-components';\nimport { filter, sortBy } from \"lodash\";\nimport MathParser from \"../MathParser\";\nimport { isTimeChart } from \"./utils/filters\";\nimport {formatDate, formatHour, formatNumber} from \"../../utils/formaters\";\n\nexport default ({\n active,\n payload,\n label,\n xAxis,\n withTime,\n forceDateTooltip,\n xFormatter,\n yFormatter,\n }) => {\n const { xKey, description, unit } = xAxis;\n const simpleFormatter = (value) => value;\n const defaultTimeFormatter = (value) => `${formatDate(value)}${withTime ? ` ${formatHour(value)}` : \"\"}`\n const mainFormatter = xFormatter || (isTimeChart(xKey) ? defaultTimeFormatter : simpleFormatter);\n const dataFormatter = yFormatter || (value => formatNumber(value, {position: -2, addSpace: true}));\n const sorted = sortBy(filter(payload, e => !e.dataKey.startsWith(\"REG_\")), [(e) => (-e.payload[e.dataKey])]);\n const forcedDate = forceDateTooltip && payload && payload[0] && payload[0].payload && payload[0].payload.time;\n if (active) {\n return (\n \n {forcedDate && (\n \n {defaultTimeFormatter(forcedDate)}\n \n )}\n {!forcedDate && (isTimeChart(xKey) ? (\n \n {mainFormatter(label)}\n \n ) :\n (\n \n {`${description} ${mainFormatter(label)} ${unit || \"\"}`} \n \n ))}\n \n {forcedDate && (\n \n \n {description} \n \n \n {`${mainFormatter(label)} ${unit || \"\"}`} \n \n \n )}\n {sorted.map((e) => (\n \n \n {e.name} \n \n \n {`${dataFormatter(e.payload[e.dataKey])} ${e.unit}`} \n \n \n ))}\n
\n \n );\n }\n return null;\n };\n \nexport const PieTooltip = ({\n active,\n payload,\n dataFormatter = (e) => e,\n}) => {\n if (active) {\n return (\n \n {payload.map(e => (\n \n \n {e.payload.description} \n \n \n \n \n {`${dataFormatter(e.value)} ${e.payload.unit}`} \n \n \n
\n \n ))}\n \n );\n }\n return null;\n};\n\n const StyledTooltip = styled.div`\n background: white;\n border: solid 1px #d4d4d4;\n border-radius: 4px;\n padding: 8px 8px 16px 8px;\n min-width: 120px;\n display: table;\n box-shadow: 0 0 8px rgba(40, 40, 40, 0.3);\n font-size: 14px;\n @media (max-width: 1600px) {\n font-size: 13px;\n }\n @media (max-width: 1440px) {\n font-size: 11px;\n padding: 4px 4px 8px 4px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n `;\n\n const Table = styled.div`\n display: table;\n `;\n \n const MainLabel = styled.div`\n font-weight: bold;\n `;\n \n const Property = styled.div`\n display: table-row;\n ${({color}) => color ? `color: ${color}` : ''};\n `;\n \n const Feature = styled.div`\n display: table-cell;\n padding-right: 8px;\n `;\n \n const FeatureValue = styled.div`\n display: table-cell;\n text-align: right;\n `;","import React from 'react';\nimport styled from 'styled-components';\nimport { Legend } from 'recharts';\n\nimport MathParser from '../MathParser';\n\nexport default () => {value} \n \n {description}\n \n \n );\n","import styled from 'styled-components';\nimport { StyledRegresionSummary } from './RegresionSummary';\n\nexport const StyledChart = styled.div`\n position: relative;\n width: 100%;\n height: 100%;\n .recharts-cartesian-axis-tick {\n font-size: 13px;\n @media (max-width: 1600px) {\n font-size: 12px;\n }\n @media (max-width: 1440px) {\n font-size: 11px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n @media print {\n font-size: 16px !important;\n }\n }\n .recharts-tooltip-wrapper {\n z-index: 100;\n }\n ${StyledRegresionSummary} {\n display: ${({showRegression}) => showRegression ? 'block' : 'none'};\n }\n &:hover {\n ${StyledRegresionSummary} {\n display: block;\n }\n }\n`;\n\nconst calculateHeight = ({showTitle, legendItems}, size) =>\n (v => v > 0 ? `calc(100% - ${v}px)` : '100%')((showTitle ? 40 : 0) + ((legendItems || 0) * size));\n\nexport const Container = styled.div`\n width: 100%;\n height: ${({showTitle, legendItems}) => calculateHeight({showTitle, legendItems}, 16)}\n`;\n\nexport const ChartTitle = styled.div`\n height: 40px;\n text-align: center;\n font-size: 1.5em;\n font-weight: bold;\n padding-bottom: 4px;\n`;\n\nexport const RegresionContainer = styled.div`\n position: absolute;\n ${({regresionPosition}) => regresionPosition === \"left\"\n ? `left: 80px;\n text-align: left;`\n : `right: 16px;\n text-align: right;`}\n bottom: 80px;\n background: white;\n max-width: 208px;\n`;\n","import React from 'react';\nimport {\n CartesianGrid,\n Line,\n LineChart,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis\n} from 'recharts';\nimport PropTypes from 'prop-types';\nimport { filter, find } from 'lodash';\n\nimport {\n addRegresionValues,\n chartRangesFromConfig,\n dateTicks,\n generateRegresionKey\n} from './utils/calculate';\nimport {\n dataFromXAxis,\n dataFromAxis,\n dataFromLimits,\n dataFromAreas,\n hasLeftAxis,\n hasRightAxis,\n isTimeChart\n} from './utils/filters';\nimport { chartConfigType, usedDataType } from './utils/chartTypes';\nimport RegresionSummary from './RegresionSummary';\nimport CustomXAxis, { CustomTimeAxis } from './CustomXAxis';\nimport CustomYAxis from './CustomYAxis';\nimport CustomTooltip from './CustomTooltip';\nimport CustomLegend from './CustomLegend';\nimport CustomArea from './CustomArea';\nimport CustomLimit from './CustomLimit';\nimport {\n StyledChart,\n Container,\n ChartTitle,\n RegresionContainer,\n} from './Common';\nimport MathParser from '../MathParser';\n\nexport default Object.assign(\n ({ usedData, data, chartConfig, ...props }) => {\n // console.log('passed to chart');\n // console.log({ usedData, data, chartConfig, ...props });\n const { xAxis, settings, yAxises, limits, areas } = chartConfig;\n const {\n showTitle,\n title,\n stopAnimation,\n stopInteractive,\n forceDateTooltip,\n horizontalGrid,\n verticalGrid,\n showLegend,\n xFormatter,\n yFormatter,\n regresionPosition,\n showRegression,\n } = settings;\n const xAxisRanges = xAxis.useDefault\n ? {\n domainMin: 'dataMin',\n domainMax: 'dataMax'\n }\n : (axisFun => axisFun(dataFromXAxis(data, xAxis.xKey), xAxis))(\n isTimeChart(xAxis.xKey) ? dateTicks : chartRangesFromConfig\n );\n const dataWithReg = addRegresionValues(\n data,\n usedData,\n xAxis.xKey,\n xAxisRanges\n );\n const xAxisChoice = () => {\n if (xAxis.useDefault) return ({ ...prop }) => \n {showTitle && (\n \n {title} \n \n )}\n \n \n \n {!stopInteractive && (\n \n \n {(!stopInteractive || showRegression) && (\n )}\n \n );\n },\n {\n propTypes: {\n chartConfig: PropTypes.shape(chartConfigType).isRequired,\n usedData: PropTypes.arrayOf(PropTypes.shape(usedDataType)).isRequired,\n data: PropTypes.arrayOf(PropTypes.any)\n }\n }\n);\n\nconst regresionSettings = {\n activeDot: false,\n lineWidth: 1,\n dashed: true,\n dashSpacing: 5,\n dashLength: 5\n};\n\nconst CustomLine = ({\n yAxises,\n description,\n showDescription,\n lineId,\n axis,\n dotted,\n dashed,\n dashSpacing,\n dashLength,\n dataSource,\n lineColor,\n lineWidth,\n unit,\n ...props\n}) => (\n (e && e.unit) || unit)(find(yAxises, e => e.id === axis))}\n name={description}\n lineId={lineId}\n strokeDasharray={dashed ? `${dashLength} ${dashSpacing}` : undefined}\n strokeWidth={dotted ? 0 : lineWidth}\n stroke={lineColor}\n dot={dotted ? { stroke: lineColor, strokeWidth: lineWidth } : false}\n dataKey={dataSource}\n yAxisId={axis}\n {...props}\n />\n);\n","import React from 'react';\nimport { ReferenceArea } from 'recharts';\n\nexport default ({\n axis,\n color,\n opacity,\n from,\n to,\n ...props\n}) =>\n\n Duża ilość danych wyświetlanych na wykresie. \n Pokazywania wykresu może spowolić działanie przeglądarki oraz mogą wystąpić niepłynne animacje. \n \n accept()}>\n Pokazuj dużą ilość danych\n \n \n );\n }\n else if (usedData.length === 0) {\n description = (\n W tym miejscu pojawi się wykres. \n Pobierz dane do wyświetlenia w sekcji Pobranie danych \n );\n }\n else if(canShowData) {\n description = (\n Aby pokazać dane, zmień ich wyświetlanie za pomocą suwaka. \n Konfiguracja wyświetlania ma miejsce w sekcji Załadowane dane \n );\n }\n else if(onlyXkey) {\n description = (\n Pobrane zostały tylko dane odkładane na osi X. \n Aby pobrać dane do wyświetlenia na innych osiach, pobierz inne dany w sekcji Pobranie danych \n lub zmień dane z osi odniesienia na zakres czasowy w sekcji Konfiguracja wykresu - Oś pozioma (odniesienia) . \n );\n }\n else {\n description = (\n Pobrane dane nie mają odpowiadających im danych na osi X. \n Wybór danych odkładanych na osi X można zmienić w sekcji Konfiguracja wykresu - Oś pozioma (odniesienia) . \n );\n }\n\n return (\n {React.Children.map(children, (child, id) => (\n \n {child}\n {id + 1 < React.Children.count(children) && \n ))}\n \n\nconst Tip = styled.span`\n font-size: 1rem;\n & + & {\n margin-top: 8px;\n }\n`;\n","import React from 'react';\n\nimport { Button, Modal } from 'antd';\n\nexport default ({visible, onLoad, onCancel, ...props}) =>\n (\n Powrót\n ,\n onLoad(false)}>\n Nie\n ,\n onLoad(true)}>\n Tak\n ,\n ]}\n {...props}\n >\n {`Dane ukryte na wykresie, lecz pobrane z bazy danych, mogą zostać ujęte w wygenerowanym pliku.`}\n );\n","import React, { useState, useContext, Fragment } from 'react';\nimport { isNil, sortBy } from 'lodash';\nimport XLSX from 'xlsx';\n\nimport { Button, message } from 'antd';\n\nimport { AppContext } from '../../../AppDataProvider';\nimport ConfirmExcel from './ConfirmExcel';\n\nconst prepareKeys = (loadFalse, usedData) => [\n {\n key: 'time',\n description: 'Data',\n },\n ...usedData.filter(({show}) => loadFalse || show)\n .map(({dataSource, fields}) => ({\n key: dataSource,\n description: fields.description,\n })),\n];\n\nconst mergeData = (loadedData) => loadedData.reduce((result, {id, data}) => [\n ...result,\n ...data.map(({time, ...rest}) => Object.keys(rest).reduce((obj, key) => ({\n ...obj,\n [`${id}-${key}`]: rest[key],\n }), { time })),\n], []);\n\nconst makeDataArray = (sorted, keys) => {\n const check = keys.map(({key}) => key);\n return sorted.map(d => check.map(key =>isNil(d[key]) ? null : d[key]));\n}\n\nconst prepareData = async (loadFalse, usedData, loadedData) => {\n return new Promise((resolve) => {\n const keys = prepareKeys(loadFalse, usedData);\n const mergedData = mergeData(loadedData);\n const sorted = sortBy(mergedData, 'time');\n const final = [];\n let value = null;\n for (let i = 0; i < sorted.length; i += 1) {\n if (sorted[i].time === value) {\n const last = final.pop();\n final.push({ ...last, ...sorted[i] });\n } else {\n final.push(sorted[i]);\n }\n value = sorted[i].time;\n }\n const formatted = makeDataArray(final, keys).map(([time, ...rest]) => [new Date(time), ...rest]);\n resolve([\n keys.map(({description}) => description),\n ...formatted]);\n });\n}\n\nexport default ({loadedData = [], usedData = [], disabled}) => {\n const {\n startAsyncTask,\n finishAsyncTask,\n } = useContext(AppContext);\n const [askExcel, setAskExcel] = useState(false);\n const onLoadAttemp = () => {\n if(usedData.some(e => !e.show)) {\n setAskExcel(true);\n }\n else {\n onLoad(false);\n }\n }\n\n const onLoad = async (loadFalse) => {\n startAsyncTask();\n try {\n const data = await prepareData(loadFalse, usedData, loadedData);\n const ws = XLSX.utils.aoa_to_sheet(data, {cellDates: true});\n const wb = XLSX.utils.book_new();\n wb.Props = {\n Title: \"Dane pobrane z KAPE Monitor\",\n Author: \"KAPE Monitor\",\n Company: \"Krajowa Agencja Poszanowania Energii\",\n CreatedDate: new Date(),\n }\n XLSX.utils.book_append_sheet(wb, ws, \"Pobrane dane\");\n XLSX.writeFile(wb, \"kapemonitor.xlsx\")\n }\n catch(e) {\n message.error('Generacja pliku .xlsx nie powiodła się.')\n }\n finishAsyncTask();\n }\n\n\n return (\n \n \n Pobierz dane\n \n setAskExcel(false)}\n onLoad={(should) => {\n onLoad(should);\n setAskExcel(false);\n }}\n />\n );\n}\n","import React, { Component } from 'react';\nimport styled from 'styled-components';\nimport { filter, sortBy, isNil } from 'lodash';\nimport moment from 'moment';\n\nimport ChartSetup from './ChartSetup';\nimport LineChart from '../../../../components/Charts/LineChart';\n\nimport { defaultChartConfig } from './ChartSetup/utils/defaults';\nimport { getDisableReason, extractEntry } from './ChartSetup/utils/constants';\nimport NoChartReason from './NoChartReason';\nimport { getMeasurementUnit } from '../../components/MeasurementsPicker';\nimport DownloadChart from '../../components/DownloadChart';\n\nconst OverflowDataCount = 15;\n\n// Ujednolica zaczytywane dane dodając prefix id\n// oraz wyrównując xKey do neutralnego\nconst updateKeys = (obj, key, xKey) => {\n const nKeys = Object.keys(obj).reduce(\n (prev, k) => ({\n ...prev,\n [k]: `${key}-${k}`\n }),\n {}\n );\n return Object.keys(nKeys).reduce(\n (prev, k) => ({\n ...prev,\n [nKeys[k]]: obj[k]\n }),\n {\n [xKey]: obj[xKey]\n }\n );\n};\n\n// Filtruje zmergowane dane po użytych kluczach\nconst filterLoadedData = (loadedData, usedData, xKey) => {\n const usedKeys = usedData.reduce((prev, { id }) => [...prev, id], [xKey]);\n return filter(\n loadedData.map(value =>\n filter(Object.keys(value), k => usedKeys.includes(k)).reduce(\n (prev, k) => ({\n ...prev,\n [k]: value[k]\n }),\n {}\n )\n ),\n set =>\n !isNil(set[xKey]) &&\n (ks => ks.length > 1 && ks.includes(xKey))(Object.keys(set))\n );\n};\n\n// Merguje załadowane dane, przy xKey != czas wykonuje zsumowanie do jednego pola\nconst mergeData = (loadedData, xKey) => {\n const merged = loadedData.reduce(\n (array, { id, data }) => [\n ...array,\n ...data.map(d => updateKeys(d, id, xKey))\n ],\n []\n );\n const sorted = sortBy(merged, xKey);\n if (xKey !== 'time') {\n return sorted;\n }\n const final = [];\n let value = null;\n for (let i = 0; i < sorted.length; i += 1) {\n if (sorted[i][xKey] === value) {\n const last = final.pop();\n final.push({ ...last, ...sorted[i] });\n } else {\n final.push(sorted[i]);\n }\n value = sorted[i][xKey];\n }\n return final;\n};\n\n// TODO element funkcyjny\nclass ChartCreate extends Component {\n constructor(props) {\n super(props);\n this.state = {\n loadedData: [],\n usedData: [],\n chartConfig: Object.assign({}, defaultChartConfig),\n now: moment(),\n acceptOverflow: false,\n };\n }\n\n update = newValue => {\n this.setState({\n ...newValue,\n });\n };\n\n mapSetupToChart = ({ loadedData, usedData, chartConfig }) => {\n const xAxisMapper = {\n common: ['color', 'description', 'showDescription', 'xKey'],\n time: ['datesNumber', 'withTime'],\n other: ['rangeFrom', 'rangeTo', 'rangeSpan', 'unit']\n };\n const type = chartConfig.xAxis.xKey === 'time' ? 'time' : 'other';\n const _chartConfig = {\n settings: {\n ...chartConfig.settings\n },\n xAxis: filter(Object.keys(chartConfig.xAxis), e =>\n [...xAxisMapper.common, ...xAxisMapper[type]].includes(e)\n ).reduce((prev, key) => ({ ...prev, [key]: chartConfig.xAxis[key] }), {}),\n yAxises: chartConfig.yAxises.map(({ id, fields }) => ({\n ...fields,\n id\n }))\n };\n const _usedData = filter(usedData, ({ show, dataSource }) => {\n if (!show) return false;\n return !getDisableReason(dataSource, loadedData, _chartConfig.xAxis.xKey);\n }).map(({ dataSource, fields }) => ({\n id: dataSource,\n dataSource,\n unit: getMeasurementUnit(extractEntry(dataSource)[1]),\n ...fields\n }));\n const _data = mergeData(loadedData, _chartConfig.xAxis.xKey);\n return {\n chartConfig: _chartConfig,\n usedData: _usedData,\n data: filterLoadedData(_data, _usedData, _chartConfig.xAxis.xKey)\n };\n };\n\n render() {\n const mapSetupResult = this.mapSetupToChart(this.state);\n const isOverflow = mapSetupResult.usedData.length >= OverflowDataCount && !this.state.acceptOverflow;\n return (\n \n \n \n \n \n \n {(mapSetupResult.usedData.length > 0 &&\n mapSetupResult.data.length > 0 && \n !isOverflow)? (\n this.update({acceptOverflow: true})}\n />\n )}\n \n \n \n 0 && mapSetupResult.data.length > 0)}\n />\n \n \n \n );\n }\n}\n\nexport default ChartCreate;\n\nconst SetupMenu = styled.div`\n height: calc(100vh - 56px);\n min-height: 664px;\n overflow-y: auto;\n flex: 0 0 464px;\n padding: 16px;\n padding-right: 0;\n @media (max-width: 1600px) {\n flex: 0 0 424px;\n }\n @media (max-width: 1440px) {\n flex: 0 0 384px;\n }\n`;\n\nconst StyledChartCreate = styled.div`\n display: flex;\n`;\n\nconst ChartPresentation = styled.div`\n padding: 16px;\n flex: 1;\n`;\n\nconst ChartContainer = styled.div`\n box-sizing: border-box;\n border: 1px solid #e8e8e8;\n background: #F8F8F8;\n width: 100%;\n padding-top: 56.25%;\n position: relative;\n`;\n\nconst ChartPlacement = styled.div`\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n padding: 16px;\n`;\n\nconst ChartDowloadContainer = styled.div`\n margin-top: 16px;\n text-align: center;\n`;\n","import ChartCreate from './ChartCreate';\n\nexport default ChartCreate;\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport ChartCreate from './scenes/ChartCreate';\n\nexport default () => {\n return (\n \n \n );\n}\n\nconst Analysis = styled.div`\n background: #EEF1F1;\n height: 100%;\n flex: 1;\n`;\n","import Analysis from './Analysis';\n\nexport default Analysis;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { Card, Icon } from \"antd\";\n\nexport default ({label, value, unit, loading, ...props}) => (\n\n\n {label} \n \n {loading ?\n \n {unit && {unit} }\n \n);\n\nconst CardValue = styled.div`\n text-align: center;\n`;\n\nconst Label = styled.div`\n font-size: 0.9em;\n @media (max-width: 1600px) {\n font-size: 0.85em;\n }\n @media (max-width: 1440px) {\n font-size: 0.75em;\n }\n`;\n\nconst Value = styled.div`\n font-weight: bold;\n font-size: 1.2em;\n @media (max-width: 1600px) {\n font-size: 1.1em;\n }\n @media (max-width: 1440px) {\n font-size: 0.95em;\n }\n`;\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport MathParser from '../../../components/MathParser';\nimport {formatMoney, formatNumber } from '../../../utils/formaters';\nimport CardValue from './CardValue';\n\nexport default ({data, loading}) => {\n const getValue = ({key, value}) => loading || value || data[key];\n const getData = ({key, value, valueFormatter}) =>\n ((v) => valueFormatter ? (valueFormatter(v)) : v)(getValue({key, value}));\n const shouldHide = ({key, value, hide}) =>\n ((v) => (hide && hide(v)))(getValue({key, value}));\n\n return (\n \n {\n loading ?\n elements.map(element =>\n \n {element.formatter({\n loading,\n label: element.label,\n unit: element.unit,\n })}\n ,\n )\n :\n elements.map(element =>\n !shouldHide(element) ?\n (\n {element.formatter({\n value: getData(element),\n label: element.label,\n unit: element.unit,\n })}\n ) : null,\n )\n }\n \n );\n};\n\nconst renderElement = ({value, label, unit, ...props}) =>\n Emisja CO_2 ,\n unit: 'ton',\n valueFormatter: (value) => (`${formatNumber(value || 0)}`),\n formatter: renderElement,\n },\n {\n key: \"renewableEnergySourcesProduction\",\n label: \"Produkcja z OZE\",\n unit: 'kWh',\n valueFormatter: (value) => (`${formatNumber(value || 0, 1)}`),\n formatter: renderElement,\n },\n {\n key: \"renewableEnergySourcesSavings\",\n label: \"Oszczędności z OZE\",\n unit: \"PLN\",\n valueFormatter: (value) => (`${formatMoney(value || 0)}`),\n formatter: renderElement,\n },\n];\n\nconst BuildingData = styled.div`\n padding: 8px;\n`;\n\nconst MyRow = styled.div`\n & + & {\n margin-top: 16px;\n @media (max-height: 800px) {\n margin-top: 8px;\n }\n }\n`;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { isNil } from 'lodash';\n\nimport Loading from '../../../components/Loading';\nimport MathParser from '../../../components/MathParser';\nimport { formatNumber } from '../../../utils/formaters';\n\nexport default ({ data = {}, loading }) => {\n const {\n minValue = 0,\n usageInSelectedBuilding: value,\n avgUsageInUsersBuilings: avg,\n } = data;\n const factor = value / (2 * avg);\n const offset = `${Math.max(Math.min(factor, 1), 0) * 100}%`;\n\n return (\n \n \n {(loading || isNil(value) || isNil(value)) ? (\n \n ) : (\n \n \n \n {formatNumber(value, {position: -1})}
\n \n \n \n {formatNumber(minValue, {position: 0})}
\n {formatNumber(2 * avg, {position: 0})}
\n \n \n <MathParser>\n Jednostkowy wskaźnik zużycia energii [kWh/m^2/rok]\n </MathParser>\n \n \n )}\n \n \n );\n};\n\nconst CompareUsageContainer = styled.div`\n position: relative;\n`;\n\nconst IndicatorContainer = styled.div`\n position: relative;\n padding: 0 0 3px;\n height: 36px;\n width: 100%;\n @media (max-width: 1600px) {\n height: 34px;\n }\n @media (max-width: 1440px) {\n height: 32px;\n }\n @media (max-width: 1366px) {\n height: 30px;\n }\n`;\n\nconst Indicator = styled.div`\n position: absolute;\n left: ${p => p.offset};\n top: 0;\n display: flex;\n width: 100%;\n flex-direction: column;\n align-items: center;\n font-weight: bold;\n transform: translateX(-50%);\n font-size: 14px;\n @media (max-width: 1600px) {\n font-size: 13px;\n }\n @media (max-width: 1440px) {\n font-size: 12px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n`;\n\nconst Arrow = styled.div`\n background: #333;\n clip-path: polygon(0 0, 100% 0, 50% 100%);\n width: 10px;\n height: 14px;\n @media (max-width: 1600px) {\n height: 13px;\n }\n @media (max-width: 1440px) {\n height: 12px;\n width: 9px;\n }\n @media (max-width: 1366px) {\n height: 10px;\n width: 8px;\n }\n`;\n\nconst GradientBar = styled.div`\n height: 15px;\n width: 100%;\n background: linear-gradient(to right, hsl(120,60%,50%) 0%, hsl(110.2,63.64%,50.46%) 10%, hsl(100.33,67.27%,50.93%) 20%, hsl(90.49,70.9%,51.39%) 30%, hsl(80.65,74.55%,51.85%) 40%, hsl(70.81,78.18%,52.32%) 50%, hsl(60.98,81.82%,52.78%) 60%, hsl(51.14,85.45%,53.24%) 70%, hsl(41.3,89.1%,53.71%) 80%, hsl(31.46,92.73%,54.17%) 90%, hsl(21.63,96.36%,54.63%) 100%);\n`;\n\nconst LabelsContainer = styled.div`\n display: flex;\n justify-content: space-between;\n font-size: 12px;\n`;\n\nconst Title = styled.div`\n text-align: center;\n font-weight: bold;\n font-size: 14px;\n line-height: 16px;\n @media (max-width: 1600px) {\n font-size: 13px;\n line-height: 15px;\n }\n @media (max-width: 1440px) {\n font-size: 12px;\n line-height: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n line-height: 12px;\n }\n`;\n\nconst InnerContent = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n padding: 4px;\n`;\n\nconst Container = styled.div`\n border: 1px solid #e8e8e8;\n box-sizing: border-box;\n position: relative;\n padding-top: calc(50% - 2px);\n background: #F8F8F8;\n margin-top: 8px;\n @media (max-width: 1440px) {\n padding-top: calc(50% + 4px);\n }\n @media (max-height: 800px) {\n margin-bottom: 4px;\n }\n`;\n","import React from 'react';\nimport styled from 'styled-components';\nimport moment from 'moment';\n\nimport { Icon } from 'antd';\n\n\nexport default ({data = {}, loading}) =>\n \n Wskazania od \n\nconst TimeSection = styled.div`\n margin-top: 24px;\n margin-bottom: 8px;\n @media (max-height: 800px) {\n margin-top: 12px;\n margin-bottom: 4px;\n }\n text-align: center;\n font-size: 1rem;\n @media (max-width: 1600px) {\n font-size: 0.9em;\n }\n @media (max-width: 1440px) {\n font-size: 0.8em;\n }\n font-weight: bold;\n`;\n","import React, { Component } from 'react';\n\nconst initialDashboardState = {\n buildings: [],\n currentBuildingId: null,\n currentTime: 'week',\n};\n\nconst DashboardContext = React.createContext({});\n\nconst getBuildingPosition = (id, buildings) => buildings.findIndex(e => e.id === id);\n\nclass DashboardDataProvider extends Component {\n set = field => value => this.setState(() => ({ [field]: value }));\n\n getBuilding = (id) => this.state.buildings.find(e => e.id === id);\n\n currentBuilding = () =>\n this.state.currentBuildingId !== null ?\n this.getBuilding(this.state.currentBuildingId)\n :\n {\n finished: {},\n }\n\n getCurrentTime = () => this.state.currentTime;\n\n setBuildings = (buildings, id) => this.setState(() => ({\n buildings: buildings.map(building => ({...building, finished: {}})),\n currentBuildingId: id,\n }));\n\n setCurrentTime = this.set('currentTime');\n\n setCurrentBuilding = this.set('currentBuildingId');\n\n startFetching = (id, key) => {\n this.setState(({buildings}) => {\n const idx = getBuildingPosition(id, buildings);\n const finished = {\n ...buildings[idx].finished,\n [key]: false,\n };\n const nbuildings = [...buildings];\n nbuildings[idx] = {\n ...buildings[idx],\n finished,\n };\n return ({\n buildings: nbuildings,\n })\n });\n }\n\n endFetching = (id, value, key) => {\n this.setState(({buildings}) => {\n const idx = getBuildingPosition(id, buildings);\n const finished = {\n ...buildings[idx].finished,\n [key]: true,\n };\n const nbuildings = [...buildings];\n nbuildings[idx] = {\n ...buildings[idx],\n finished,\n [key]: value,\n };\n return ({\n buildings: nbuildings,\n })\n });\n }\n\n startFetchingData = (id) => this.startFetching(id, 'data');\n \n endFetchingData = (id, value) =>\n this.endFetching(id, value, 'data');\n\n startFetchingTime = (id, timeKey) => this.startFetching(id, timeKey);\n \n endFetchingTime = (id, value, time) =>\n this.endFetching(id, value, time);\n\n depricateData = (keys) => {\n this.setState(({buildings}) => {\n const nbuildings = buildings.map(\n building => {\n const nb = {...building};\n const finished = {...building.finished};\n keys.forEach(key => {\n delete nb[key];\n delete finished[key];\n });\n return {...nb, finished};\n });\n return ({\n buildings: nbuildings,\n })\n });\n }\n\n depricateHourData = () => this.depricateData(['data', 'day', 'week']);\n\n depricateDailyData = () => this.depricateData(['month', 'year']);\n\n state = {\n ...initialDashboardState,\n currentBuilding: this.currentBuilding,\n getBuilding: this.getBuilding,\n getCurrentTime: this.getCurrentTime,\n setBuildings: this.setBuildings,\n setCurrentTime: this.setCurrentTime,\n setCurrentBuilding: this.setCurrentBuilding,\n // Pobierane danych\n startFetchingData: this.startFetchingData,\n endFetchingData: this.endFetchingData,\n startFetchingTime: this.startFetchingTime,\n endFetchingTime: this.endFetchingTime,\n // Czyszczenie danych na potrzeby odświeżania\n depricateDailyData: this.depricateDailyData,\n depricateHourData: this.depricateHourData,\n };\n\n render() {\n return (\n \n {this.props.children}\n \n );\n }\n}\n\nexport { DashboardContext };\nexport default DashboardDataProvider;\n","import React, { useContext } from 'react';\nimport styled from 'styled-components';\n\nimport AnnualData from '../components/AnnualData';\nimport EnergyUseCompare from '../components/EnergyUseCompare';\nimport TimeSection from '../components/TimeSection';\n\nimport { DashboardContext } from '../DashboardDataProvider';\n\nexport default () => {\n const { currentBuilding } = useContext(DashboardContext);\n const building = currentBuilding();\n const fetchingData = !building.finished.data;\n return (\n \n \n );\n};\n\nconst BuildingDetails = styled.div`\n width: 272px;\n padding: 0 16px;\n @media (max-width: 1600px) {\n width: 236px;\n padding: 0 12px;\n }\n @media (max-width: 1440px) {\n width: 200px;\n padding: 0 8px;\n }\n`;\n","import React from \"react\";\nimport {\n CartesianGrid,\n Area,\n AreaChart,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n} from \"recharts\";\nimport PropTypes from \"prop-types\";\nimport { find } from \"lodash\";\n\nimport {\n chartRangesFromConfig,\n dateTicks,\n} from \"./utils/calculate\";\nimport {\n dataFromXAxis,\n dataFromAxis,\n hasLeftAxis,\n hasRightAxis,\n isTimeChart,\n} from \"./utils/filters\";\nimport {\n chartConfigType,\n usedDataType,\n} from \"./utils/chartTypes\";\nimport CustomXAxis, { CustomTimeAxis } from \"./CustomXAxis\";\nimport CustomYAxis from \"./CustomYAxis\";\nimport CustomTooltip from \"./CustomTooltip\";\nimport CustomLegend from \"./CustomLegend\";\nimport { StyledChart, Container, ChartTitle } from './Common';\nimport MathParser from \"../MathParser\";\n\nexport default Object.assign(\n ({ usedData, data, chartConfig, ...props }) => {\n const { xAxis, settings, yAxises } = chartConfig;\n const {\n showTitle,\n title,\n stopAnimation,\n stopInteractive,\n horizontalGrid,\n verticalGrid,\n showLegend,\n xFormatter,\n yFormatter,\n stackData = true,\n } = settings;\n const xAxisRanges = xAxis.useDefault\n ? {\n domainMin: 'dataMin',\n domainMax: 'dataMax',\n }\n : (axisFun =>\n axisFun(dataFromXAxis(data, xAxis.xKey), xAxis))(\n isTimeChart(xAxis.xKey) ? dateTicks : chartRangesFromConfig,\n );\n const xAxisChoice = () => {\n if(xAxis.useDefault) return ({...prop}) => \n {showTitle && (\n {title} \n \n \n {!stopInteractive && (\n \n \n \n );\n },\n {\n propTypes: {\n chartConfig: PropTypes.shape(chartConfigType).isRequired,\n usedData: PropTypes.arrayOf(PropTypes.shape(usedDataType)).isRequired,\n data: PropTypes.arrayOf(PropTypes.any),\n },\n });\n\nconst CustomArea = ({\n yAxises,\n description,\n areaId,\n axis,\n dataSource,\n lineColor,\n lineWidth,\n unit,\n stackData,\n ...props\n}) => (\n (e && e.unit) || unit)(find(yAxises, e => e.id === axis))}\n name={description}\n id={areaId}\n stackId={stackData ? \"1\" : undefined}\n stroke={lineColor}\n fill={lineColor}\n dot={false}\n dataKey={dataSource}\n yAxisId={axis}\n {...props}\n />\n );\n","import React from \"react\";\nimport {\n BarChart,\n Bar,\n CartesianGrid,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n} from \"recharts\";\nimport { find } from \"lodash\";\nimport styled from \"styled-components\";\nimport PropTypes from \"prop-types\";\n\nimport {\n chartRangesFromConfig,\n dateTicks,\n} from \"./utils/calculate\";\nimport {\n dataFromXAxis,\n dataFromAxis,\n dataFromLimits,\n hasLeftAxis,\n hasRightAxis,\n isTimeChart,\n} from \"./utils/filters\";\nimport {\n chartConfigType,\n usedDataType,\n} from \"./utils/chartTypes\";\nimport CustomXAxis, { CustomTimeAxis, DefaultAxis } from \"./CustomXAxis\";\nimport CustomYAxis from \"./CustomYAxis\";\nimport CustomTooltip from \"./CustomTooltip\";\nimport CustomLegend from \"./CustomLegend\";\nimport CustomLimit from \"./CustomLimit\";\nimport { StyledChart, Container, ChartTitle} from './Common';\nimport MathParser from \"../MathParser\";\n\n\nexport default Object.assign(\n ({ usedData, data, chartConfig, extra }) => {\n const { xAxis, settings, yAxises, limits } = chartConfig;\n const {\n showTitle,\n title,\n stopAnimation,\n stopInteractive,\n showLegend,\n horizontalGrid,\n verticalGrid,\n xFormatter,\n yFormatter,\n } = settings;\n const xAxisRanges = xAxis.useDefault\n ? {\n domainMin: 'dataMin',\n domainMax: 'dataMax',\n }\n : (axisFun =>\n axisFun(dataFromXAxis(data, xAxis.xKey), xAxis))(\n isTimeChart(xAxis.xKey) ? dateTicks : chartRangesFromConfig,\n );\n const xAxisChoice = () => {\n if(xAxis.useDefault) return DefaultAxis;\n return isTimeChart(xAxis.xKey) ? CustomTimeAxis : CustomXAxis;\n }\n return (\n \n {showTitle && (\n {title} \n \n \n {!stopInteractive && (\n \n {extra && \n {extra}\n }\n \n \n )\n },\n {\n propTypes: {\n chartConfig: PropTypes.shape(chartConfigType).isRequired,\n usedData: PropTypes.arrayOf(PropTypes.shape(usedDataType)).isRequired,\n data: PropTypes.arrayOf(PropTypes.any),\n },\n },\n)\n\nconst CustomBar = ({\n yAxises,\n description,\n showDescription,\n lineId,\n axis,\n dotted,\n dashed,\n dashSpacing,\n dashLength,\n dataSource,\n lineColor,\n lineWidth,\n unit,\n ...props\n}) => (\n (e && e.unit) || unit)(find(yAxises, e => e.id === axis))}\n name={description}\n lineId={lineId}\n fill={lineColor}\n dataKey={dataSource}\n yAxisId={axis}\n maxBarSize={50}\n {...props}\n />\n );\n\nconst Extra = styled.div`\n position: absolute;\n right: 0;\n bottom: 50%;\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport PropTypes from \"prop-types\";\nimport { sortBy } from \"lodash\";\nimport {\n Cell,\n Label,\n Pie,\n PieChart,\n ResponsiveContainer,\n Tooltip,\n} from \"recharts\";\n\nimport { Container, ChartTitle } from \"./Common\";\nimport { PieTooltip } from \"./CustomTooltip\";\nimport MathParser from '../MathParser';\n\nconst RADIAN = Math.PI / 180;\n \nconst customLabel = ({ cx, cy, midAngle, outerRadius, fill, payload, percent, value }) => {\n const sin = Math.sin(-RADIAN * midAngle);\n const cos = Math.cos(-RADIAN * midAngle);\n const sx = cx + (outerRadius + 6) * cos;\n const sy = cy + (outerRadius + 6) * sin;\n const mx = cx + (outerRadius + 20) * cos;\n const my = cy + (outerRadius + 20) * sin;\n const ex = mx + (cos >= 0 ? 1 : -1) * 14;\n const ey = my;\n const textAnchor = cos >= 0 ? 'start' : 'end';\n\n return (\n \n \n \n = 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill=\"#333\">{payload.shortcut} \n = 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill=\"#999\">\n {`(${(percent * 100).toFixed(1)}%)`}\n \n \n );\n};\n\nconst CustomInner = ({viewBox, innerContent, innerRadius}) => {\n const percentage = parseInt(innerRadius, 10);\n const R = Math.min(viewBox.cx, viewBox.cy) * percentage / 100;\n return (\n \n \n \n \n {innerContent}\n \n \n \n \n );\n}\n \n\nconst FullDiv = styled.div`\nposition: relative;\nheight: 100%;\nwidth: 100%;\nborder-radius: 50%;\n`;\n\nconst InnerDiv = styled.div`\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n transform: translate(-50%, -50%);\n`;\n\nconst getColor = ({color, key, value}, idx, colorMapper) =>\n colorMapper\n ? colorMapper({key, value, color, idx})\n : color;\n\nconst prepareData = ({data, descriptionMapper, shortcutMapper, showEmpty, descriptionKey, ...rest}) => {\n const sum = data.reduce((s, {value}) => s + value, 0);\n return sortBy(\n data.filter(({value}) => !showEmpty || value).map(\n e => ({\n ...e,\n description: descriptionMapper ? descriptionMapper(e[descriptionKey]) : e[descriptionKey],\n shortcut: shortcutMapper ? shortcutMapper(e[descriptionKey]) : e[descriptionKey],\n percentage: sum > 0 ? e.value / sum : 0,\n ...rest,\n })),\n [e => -e.value],\n );\n}\n\nexport default Object.assign(\n({\n data,\n unit,\n showEmpty,\n showLabel = true,\n showLegend,\n showTitle,\n title,\n descriptionMapper,\n shortcutMapper,\n showTooltip,\n colorMapper,\n innerContent,\n innerRadius = \"32%\",\n outerRadius = \"48%\",\n descriptionKey = \"key\",\n dataFormatter,\n ...props\n}) => {\n const nData = prepareData({\n data,\n descriptionMapper,\n shortcutMapper,\n showEmpty,\n unit,\n descriptionKey,\n });\n return (\n \n {showTitle && (\n \n {title} \n \n )}\n \n \n \n {showTooltip &&\n \n }\n />}\n \n {\n nData.map((e, idx) => | )\n }\n {\n innerContent &&\n } />\n }\n \n \n \n \n {showLegend && (\n );\n},\n{\n propTypes: {\n data: PropTypes.arrayOf(PropTypes.shape({\n key: PropTypes.string.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n color: PropTypes.string,\n })),\n },\n},\n)\n\nconst StyledPieChart = styled.div`\n position: relative;\n width: 100%;\n height: 100%;\n .recharts-layer {\n font-size: 14px;\n @media (max-width: 1600px) {\n font-size: 13px;\n }\n @media (max-width: 1440px) {\n font-size: 12px;\n }\n @media (max-width: 1366px) {\n font-size: 11px;\n }\n }\n`;\n\nconst CustomPieLegend = ({data, colorMapper}) => (\n \n \n {data.map((e, idx) => (\n {`${e.description} - (${(e.percentage * 100).toFixed(1)}%)`}))}\n \n \n)\n\nconst LegendItem = styled.div`\n &:before {\n content: '';\n display: inline-block;\n vertical-align: middle;\n position: relative;\n background: ${({color}) => color};\n margin-right: 16px;\n width: 12px;\n height: 12px;\n border-radius: 6px;\n }\n\n & + & {\n @media (max-width: 1440px) {\n margin-top: 4px;\n }\n }\n`;\n\nconst StyledLegend = styled.div`\n font-size: 12px;\n line-height: 12px;\n @media (max-width: 1440px) {\n font-size: 11px;\n line-height: 11px;\n }\n display: flex;\n`;\n\nconst LegendWrapper = styled.div`\n margin: auto;\n`;\n","import React from \"react\";\nimport {\n CartesianGrid,\n Label,\n ReferenceDot,\n ReferenceLine,\n ResponsiveContainer,\n ScatterChart,\n Tooltip,\n XAxis,\n} from \"recharts\";\nimport PropTypes from \"prop-types\";\n\nimport {\n chartRangesFromConfig,\n dateTicks,\n} from \"./utils/calculate\";\nimport {\n dataFromXAxis,\n dataFromAxis,\n hasLeftAxis,\n hasRightAxis,\n isTimeChart,\n} from \"./utils/filters\";\nimport {\n chartConfigType,\n usedDataType,\n} from \"./utils/chartTypes\";\nimport CustomXAxis, { CustomTimeAxis } from \"./CustomXAxis\";\nimport CustomYAxis from \"./CustomYAxis\";\nimport CustomTooltip from \"./CustomTooltip\";\nimport CustomLegend from \"./CustomLegend\";\nimport { StyledChart, Container, ChartTitle } from './Common';\nimport MathParser from \"../MathParser\";\n\nexport default Object.assign(\n ({ usedData, data, chartConfig, ...props }) => {\n const { xAxis, settings, yAxises } = chartConfig;\n const {\n showTitle,\n title,\n stopInteractive,\n horizontalGrid,\n verticalGrid,\n showLegend,\n xFormatter,\n yFormatter,\n } = settings;\n const xAxisRanges = xAxis.useDefault\n ? {\n domainMin: 'dataMin',\n domainMax: 'dataMax',\n }\n : (axisFun =>\n axisFun(dataFromXAxis(data, xAxis.xKey), xAxis))(\n isTimeChart(xAxis.xKey) ? dateTicks : chartRangesFromConfig,\n );\n const xAxisChoice = () => {\n if(xAxis.useDefault) return ({...prop}) => \n {showTitle && (\n {title} \n \n \n {!stopInteractive && (\n \n \n \n \n );\n },\n {\n propTypes: {\n chartConfig: PropTypes.shape(chartConfigType).isRequired,\n usedData: PropTypes.arrayOf(PropTypes.shape(usedDataType)).isRequired,\n data: PropTypes.arrayOf(PropTypes.any),\n },\n });\n\nconst CustomDot = ({\n x,\n y,\n r,\n description,\n descriptionPosition = \"bottom\",\n showDescription,\n axis,\n lineColor,\n lineWidth,\n ...props\n}) => (\n \n {showDescription ? ({description} ) : null}\n \n );\n","import React from 'react';\n\nimport AreaChart from './Charts/AreaChart';\nimport BarChart from './Charts/BarChart';\nimport LineChart from './Charts/LineChart';\nimport PieChart from './Charts/PieChart';\nimport ScatteredChart from './Charts/ScatteredChart';\n\n\nexport const CHART_TYPES = Object.freeze({\n AREA_CHART: 'area-chart',\n LINE_CHART: 'line-chart',\n BAR_CHART: 'bar-chart',\n PIE_CHART: 'pie-chart',\n SCATTERED_CHART: 'scattered-chart',\n});\n\nexport default ({chartType, ...rest}) => (Chart => Chart ? \n {title} }\n bodyStyle={{ height: 'calc(100% - 40px)', padding: '0 12px 12px' }}\n headStyle={{ textAlign: 'center', border: 'none' }}\n spread={spread ? 1 : 0}\n >\n {!hide && (loading\n ? \n : children)}\n \n \n\nconst StyledTitle = styled.span`\n font-size: 14px;\n @media (max-width: 1600px) {\n font-size: 13px;\n }\n @media (max-width: 1440px) {\n font-size: 12px;\n }\n @media (max-width: 1366px) {\n font-size: 11px;\n }\n`;\n\nconst ChartCard = styled.div`\n padding: 8px;\n height: 100%;\n margin: 0;\n`;\n\nconst StyledCard = styled(Card)`\n background: #F8F8F8 !important;\n width: ${({spread}) => `calc((100vw - 448px) / ${spread ? 2 : 3} - 16px)`};\n min-width: 285px;\n height: calc((100vh - 136px) / 2 - 24px);\n min-height: 276px;\n &.ant-card {\n transition: none;\n }\n @media (max-height: 800px) {\n height: calc((100vh - 120px) / 2 - 24px);\n }\n @media (max-width: 1600px) {\n width: ${({spread}) => `calc((100vw - 412px) / ${spread ? 2 : 3} - 16px)`};\n }\n @media (max-width: 1440px) {\n width: ${({spread}) => `calc((100vw - 376px) / ${spread ? 2 : 3} - 16px)`};\n }\n`;\n","import { formatNumber } from '../../../../utils/formaters';\nimport { multiChartLineColors } from '../../../../components/ColorSelect';\nimport { CHART_TYPES } from '../../../../components/CustomChart';\n\nexport const dayConfig = {\n heatPowerConsumption: ({ settings }) => ({\n chartConfig: {\n settings: {\n stopAnimation: false,\n stopInteractive: false,\n title: '',\n showTitle: false,\n showLegend: false,\n horizontalGrid: false,\n verticalGrid: false,\n yFormatter: e => formatNumber(e, { position: -1 }),\n },\n ...(settings.limit && {\n limits: [\n {\n description: null,\n axis: '0',\n lineWidth: 2,\n lineColor: '#C9776B',\n dashLength: 10,\n dashSpacing: 15,\n value: settings.limit,\n },\n ],\n }),\n xAxis: {\n xKey: 'time',\n description: 'Czas',\n showDescription: false,\n color: '#333',\n datesNumber: 3,\n withTime: true,\n },\n yAxises: [\n {\n id: '0',\n color: '#333',\n showAxis: true,\n side: 'left',\n description: 'Pobór mocy cieplnej',\n showDescription: true,\n unit: 'kW',\n rangeFrom: '0',\n rangeTo: 'auto',\n rangeSpan: 'auto',\n },\n ],\n },\n chartType: CHART_TYPES.LINE_CHART,\n usedData: [\n {\n id: '0',\n description: 'Pobór mocy cieplnej',\n dataSource: 'heatPower',\n axis: '0',\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: '#0E4194',\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: 'kW',\n },\n ],\n }),\n electricityPowerConsumption: ({ settings }) => ({\n chartConfig: {\n settings: {\n stopAnimation: false,\n stopInteractive: false,\n title: '',\n showTitle: false,\n showLegend: false,\n horizontalGrid: false,\n verticalGrid: false,\n yFormatter: e => formatNumber(e, { position: -1 }),\n },\n ...(settings.limit && {\n limits: [\n {\n description: null,\n axis: '0',\n lineWidth: 2,\n lineColor: '#C9776B',\n dashLength: 10,\n dashSpacing: 15,\n value: settings.limit,\n },\n ],\n }),\n xAxis: {\n xKey: 'time',\n description: 'Czas',\n showDescription: false,\n color: '#333',\n datesNumber: 3,\n withTime: true,\n },\n yAxises: [\n {\n id: '0',\n color: '#333',\n showAxis: true,\n side: 'left',\n description: 'Pobór mocy elekt.',\n showDescription: true,\n unit: 'kW',\n rangeFrom: '0',\n rangeTo: 'auto',\n rangeSpan: 'auto',\n },\n ],\n },\n chartType: CHART_TYPES.LINE_CHART,\n usedData: [\n {\n id: '0',\n description: 'Pobór mocy elektrycznej',\n dataSource: 'electricityPower',\n axis: '0',\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: '#0E4194',\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: 'kW',\n },\n ],\n }),\n OZEPowerProduction: ({ settings }) => ({\n chartConfig: {\n settings: {\n stopAnimation: false,\n stopInteractive: false,\n title: '',\n showTitle: false,\n showLegend: false,\n horizontalGrid: false,\n verticalGrid: false,\n yFormatter: e => formatNumber(e, { position: -1 }),\n },\n ...(settings.limit && {\n limits: [\n {\n description: null,\n axis: '0',\n lineWidth: 2,\n lineColor: '#C9776B',\n dashLength: 10,\n dashSpacing: 15,\n value: settings.limit,\n },\n ],\n }),\n xAxis: {\n xKey: 'time',\n description: 'Czas',\n showDescription: false,\n color: '#333',\n datesNumber: 3,\n withTime: true,\n },\n yAxises: [\n {\n id: '0',\n color: '#333',\n showAxis: true,\n side: 'left',\n description: 'Moc elekt. z OZE',\n showDescription: true,\n unit: 'kW',\n rangeFrom: '0',\n rangeTo: 'auto',\n rangeSpan: 'auto',\n },\n ],\n },\n chartType: CHART_TYPES.LINE_CHART,\n usedData: [\n {\n id: '0',\n description: 'Produkcja energii elektrycznej z OZE',\n dataSource: 'OZEPower',\n axis: '0',\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: '#0E4194',\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: 'kW',\n },\n ],\n }),\n temperatures: ({ settings }) => ({\n chartConfig: {\n settings: {\n stopAnimation: false,\n stopInteractive: false,\n title: '',\n showTitle: false,\n showLegend: false,\n horizontalGrid: false,\n verticalGrid: false,\n yFormatter: e => formatNumber(e, { position: -1 }),\n },\n xAxis: {\n xKey: 'time',\n description: 'Czas',\n showDescription: false,\n color: '#333',\n datesNumber: 3,\n withTime: true,\n },\n yAxises: [\n {\n id: '0',\n color: '#333',\n showAxis: true,\n side: 'left',\n description: 'Temperatura',\n showDescription: true,\n unit: '^oC',\n rangeFrom: 'auto',\n rangeTo: 'auto',\n rangeSpan: 'auto',\n },\n ],\n },\n chartType: CHART_TYPES.LINE_CHART,\n usedData: settings.measurements.map(({ dataSource, description }, id) => ({\n id: id.toString(),\n description,\n dataSource,\n axis: '0',\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: multiChartLineColors[id % multiChartLineColors.length].color,\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: '^oC',\n })),\n }),\n co2: ({ settings }) => ({\n chartConfig: {\n settings: {\n stopAnimation: false,\n stopInteractive: false,\n title: '',\n showTitle: false,\n showLegend: false,\n horizontalGrid: false,\n verticalGrid: false,\n yFormatter: e => formatNumber(e, { position: -1 }),\n },\n limits: [\n {\n description: null,\n axis: '0',\n lineWidth: 2,\n lineColor: '#C9776B',\n dashLength: 10,\n dashSpacing: 15,\n value: settings.limit || 1000,\n },\n ],\n xAxis: {\n xKey: 'time',\n description: 'Czas',\n showDescription: false,\n color: '#333',\n datesNumber: 3,\n withTime: true,\n },\n yAxises: [\n {\n id: '0',\n color: '#333',\n showAxis: true,\n side: 'left',\n description: 'Stężenie CO_2',\n showDescription: true,\n unit: 'ppm',\n rangeFrom: '0',\n rangeTo: 'auto',\n rangeSpan: 'auto',\n minMax: 1500,\n },\n ],\n },\n chartType: CHART_TYPES.LINE_CHART,\n usedData: settings.measurements.map(({ dataSource, description }, id) => ({\n id: id.toString(),\n description,\n dataSource,\n axis: '0',\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: multiChartLineColors[id % multiChartLineColors.length].color,\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: 'ppm',\n })),\n }),\n humidity: ({ settings }) => ({\n chartConfig: {\n settings: {\n stopAnimation: false,\n stopInteractive: false,\n title: '',\n showTitle: false,\n showLegend: false,\n horizontalGrid: false,\n verticalGrid: false,\n yFormatter: e => formatNumber(e, { position: -1 }),\n },\n areas: [\n {\n axis: '0',\n color: '#03cca7',\n opacity: 1,\n from: settings.limitMin || 40,\n to: settings.limitMax || 60,\n },\n ],\n xAxis: {\n xKey: 'time',\n description: 'Czas',\n showDescription: false,\n color: '#333',\n datesNumber: 3,\n withTime: true,\n },\n yAxises: [\n {\n id: '0',\n color: '#333',\n showAxis: true,\n side: 'left',\n description: 'Wilgotność względna',\n showDescription: true,\n unit: '%',\n rangeFrom: '0',\n rangeTo: '100',\n rangeSpan: '20',\n },\n ],\n },\n chartType: CHART_TYPES.LINE_CHART,\n usedData: settings.measurements.map(({ dataSource, description }, id) => ({\n id: id.toString(),\n description,\n dataSource,\n axis: '0',\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: multiChartLineColors[id % multiChartLineColors.length].color,\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: '%',\n })),\n }),\n};\n","import moment from 'moment';\n\nimport { formatNumber } from '../../../../utils/formaters';\nimport { multiChartLineColors } from '../../../../components/ColorSelect';\nimport { CHART_TYPES } from '../../../../components/CustomChart';\n\nconst barProps = {\n minTickGap: 15,\n interval: \"preserveStart\",\n};\n\nexport const weekConfig = {\n heatPowerConsumption: ({settings}) => ({\n chartConfig: {\n settings: {\n stopAnimation: false,\n stopInteractive: false,\n title: \"\",\n showTitle: false,\n showLegend: false,\n horizontalGrid: false,\n verticalGrid: false,\n yFormatter: (e) => formatNumber(e, {position: -1}),\n },\n ...(settings.limit && {\n limits: [\n {\n description: null,\n axis: \"0\",\n lineWidth: 2,\n lineColor: \"#C9776B\",\n dashLength: 10,\n dashSpacing: 15,\n value: settings.limit,\n },\n ],\n }),\n xAxis: {\n xKey: \"time\",\n description: \"Czas\",\n showDescription: false,\n color: \"#333\",\n datesNumber: 3,\n withTime: true,\n },\n yAxises: [\n {\n id: \"0\",\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"Pobór mocy cieplnej\",\n showDescription: true,\n unit: \"kW\",\n rangeFrom: \"0\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n ],\n },\n chartType: CHART_TYPES.LINE_CHART,\n usedData: [\n {\n id: \"0\",\n description: \"Pobór mocy cieplnej\",\n dataSource: \"heatPower\",\n axis: \"0\",\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: \"#0E4194\",\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: \"kW\",\n },\n ],\n }),\n electricityPowerConsumption: ({settings}) => ({\n chartConfig: {\n settings: {\n stopAnimation: false,\n stopInteractive: false,\n title: \"\",\n showTitle: false,\n showLegend: false,\n horizontalGrid: false,\n verticalGrid: false,\n yFormatter: (e) => formatNumber(e, {position: -1}),\n },\n ...(settings.limit && {\n limits: [\n {\n description: null,\n axis: \"0\",\n lineWidth: 2,\n lineColor: \"#C9776B\",\n dashLength: 10,\n dashSpacing: 15,\n value: settings.limit,\n },\n ],\n }),\n xAxis: {\n xKey: \"time\",\n description: \"Czas\",\n showDescription: false,\n color: \"#333\",\n datesNumber: 3,\n withTime: true,\n },\n yAxises: [\n {\n id: \"0\",\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"Pobór mocy elekt.\",\n showDescription: true,\n unit: \"kW\",\n rangeFrom: \"0\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n ],\n },\n chartType: CHART_TYPES.LINE_CHART,\n usedData: [\n {\n id: \"0\",\n description: \"Pobór mocy elektrycznej\",\n dataSource: \"electricityPower\",\n axis: \"0\",\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: \"#0E4194\",\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: \"kW\",\n },\n ],\n }),\n totalConsumption: () => ({\n chartConfig: {\n settings: {\n stopAnimation: false,\n stopInteractive: false,\n title: \"\",\n showTitle: false,\n showLegend: false,\n horizontalGrid: false,\n verticalGrid: false,\n xFormatter: (e) => moment(e).format(\"YYYY-MM-DD\"),\n yFormatter: (e) => formatNumber(e, {position: -1}),\n },\n xAxis: {\n xKey: \"time\",\n description: \"Czas\",\n showDescription: false,\n color: \"#333\",\n datesNumber: 3,\n withTime: false,\n useDefault: true,\n ...barProps,\n },\n yAxises: [\n {\n id: \"0\",\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"Zużycie energii\",\n showDescription: true,\n unit: \"kWh\",\n rangeFrom: \"0\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n ],\n },\n chartType: CHART_TYPES.BAR_CHART,\n usedData: [\n {\n id: \"0\",\n description: \"Dzienne zużycie energii elektrycznej\",\n dataSource: \"dailyElectricityConsumption\",\n axis: \"0\",\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: '#10C8CA',\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: \"kWh\",\n },\n {\n id: \"1\",\n description: \"Dzienne zużycie ciepła\",\n dataSource: \"dailyHeatConsumption\",\n axis: \"0\",\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: '#4462ba',\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: \"kWh\",\n },\n ],\n }),\n temperatures: ({settings}) => ({\n chartConfig: {\n settings: {\n stopAnimation: false,\n stopInteractive: false,\n title: \"\",\n showTitle: false,\n showLegend: false,\n horizontalGrid: false,\n verticalGrid: false,\n yFormatter: (e) => formatNumber(e, {position: -1}),\n },\n xAxis: {\n xKey: \"time\",\n description: \"Czas\",\n showDescription: false,\n color: \"#333\",\n datesNumber: 3,\n withTime: true,\n },\n yAxises: [\n {\n id: \"0\",\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"Temperatura\",\n showDescription: true,\n unit: \"^oC\",\n rangeFrom: \"auto\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n ],\n },\n chartType: CHART_TYPES.LINE_CHART,\n usedData: settings.measurements.map(\n ({dataSource, description}, id) => ({\n id: id.toString(),\n description,\n dataSource,\n axis: \"0\",\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: multiChartLineColors[id % multiChartLineColors.length].color,\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: \"^oC\",\n }),\n ),\n }),\n co2: ({settings}) => ({\n chartConfig: {\n settings: {\n stopAnimation: false,\n stopInteractive: false,\n title: \"\",\n showTitle: false,\n showLegend: false,\n horizontalGrid: false,\n verticalGrid: false,\n yFormatter: (e) => formatNumber(e, {position: -1}),\n },\n limits: [\n {\n description: null,\n axis: \"0\",\n lineWidth: 2,\n lineColor: \"#C9776B\",\n dashLength: 10,\n dashSpacing: 15,\n value: settings.limit || 1000,\n },\n ],\n xAxis: {\n xKey: \"time\",\n description: \"Czas\",\n showDescription: false,\n color: \"#333\",\n datesNumber: 3,\n withTime: true,\n },\n yAxises: [\n {\n id: \"0\",\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"Stężenie CO_2\",\n showDescription: true,\n unit: \"ppm\",\n rangeFrom: \"0\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n minMax: 1500,\n },\n ],\n },\n chartType: CHART_TYPES.LINE_CHART,\n usedData: settings.measurements.map(\n ({dataSource, description}, id) => ({\n id: id.toString(),\n description,\n dataSource,\n axis: \"0\",\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: multiChartLineColors[id % multiChartLineColors.length].color,\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: \"ppm\",\n }),\n ),\n }),\n OZEProduction: () => ({\n chartConfig: {\n settings: {\n stopAnimation: false,\n stopInteractive: false,\n title: \"\",\n showTitle: false,\n showLegend: false,\n horizontalGrid: false,\n verticalGrid: false,\n xFormatter: (e) => moment(e).format(\"YYYY-MM-DD\"),\n yFormatter: (e) => formatNumber(e, {position: -1}),\n },\n xAxis: {\n xKey: \"time\",\n description: \"Czas\",\n showDescription: false,\n color: \"#333\",\n datesNumber: 3,\n withTime: false,\n useDefault: true,\n ...barProps,\n },\n yAxises: [\n {\n id: \"0\",\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"Produkcja energii\",\n showDescription: true,\n unit: \"kWh\",\n rangeFrom: \"0\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n ],\n },\n chartType: CHART_TYPES.BAR_CHART,\n usedData: [\n {\n id: \"0\",\n description: \"Produkcja energii elektrycznej z OZE\",\n dataSource: \"dailyOZEProduction\",\n axis: \"0\",\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: \"#2490be\",\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: \"kWh\",\n },\n ],\n }),\n}\n","const energyUsageAreas = Object.freeze({\n mainCooling: {\n description: 'Główne chłodzenie',\n shortcut: 'Chłodz.',\n color: '#03cca7',\n },\n mainVentilation: {\n description: 'Główna wentylacja',\n shortcut: 'Went.',\n color: '#2490be',\n },\n mainLight: {\n description: 'Główne oświetlenie',\n shortcut: 'Oświetl.',\n color: '#10C8CA',\n },\n cwu: {\n description: 'Ciepła woda użytkowa',\n shortcut: 'CWU',\n color: '#249BBE',\n },\n co: {\n description: 'Centralne ogrzewanie',\n shortcut: 'CO',\n color: '#0E4194',\n },\n});\n\nexport default energyUsageAreas;\n\nexport const mapUsageAreaDescription = key =>\n (value => (value ? value.description : key))(energyUsageAreas[key]);\n\nexport const mapUsageAreaShortcut = key =>\n (value => (value ? value.shortcut : key))(energyUsageAreas[key]);\n\nexport const mapUsageAreaColor = ({ key }) =>\n (value => (value ? value.color : key))(energyUsageAreas[key]);\n","import energyUsageAreas, {\n mapUsageAreaColor,\n mapUsageAreaDescription,\n mapUsageAreaShortcut,\n} from './energyUsageAreas';\n\nexport default {\n energyUsageAreas,\n mapUsageAreaColor,\n mapUsageAreaDescription,\n mapUsageAreaShortcut,\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { Icon } from \"antd\";\n\nimport { formatNumber } from \"../../../utils/formaters\";\n\nexport default ({ data, dataKey }) => {\n const gain = formatNumber(calculateGain(data, dataKey), { position: -1 });\n\n return (\n \n \n \n \n \n \n \n \n {`${gain}%`}\n \n \n );\n}\n\nconst gainColor = \"#C9776B\";\nconst looseColor = \"#74B885\";\n\nconst calculateGain = (data, dataKey) => {\n if(data.length !== 2) return 0;\n const [first, last] = data;\n return (last[dataKey] - first[dataKey]) / first[dataKey] * 100;\n}\n\nconst GainTip = styled.div`\n position: relative;\n margin-right: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n padding: 4px;\n background: #F8F8F8;\n font-size: 1.2em;\n @media (max-width: 1600px) {\n font-size: 1.1em;\n }\n @media (max-width: 1440px) {\n font-size: 0.95em;\n }\n`;\n\nconst IconContainer = styled.div`\n position: relative;\n`;\n\nconst Up = styled.div`\n margin-bottom: -14px;\n ${({ gain }) => (gain > 0) ? `color: ${gainColor}` : ''}\n`;\n\nconst Down = styled.div`\n margin-top: -14px;\n ${({ gain }) => (gain < 0) ? `color: ${looseColor}` : ''}\n`;\n\nconst DataContainer = styled.div`\n color: #0E4194;\n ${({ gain }) => (gain > 0) ? `color: ${gainColor}` : ''}\n ${({ gain }) => (gain < 0) ? `color: ${looseColor}` : ''}\n margin-left: 4px;\n`;\n","import React from 'react';\nimport moment from 'moment';\n\nimport { formatNumber } from '../../../../utils/formaters';\nimport Dictionaries from '../../../../utils/dictionaries';\nimport { CHART_TYPES } from '../../../../components/CustomChart';\nimport GainTip from '../../components/GainTip';\n\nconst { mapUsageAreaColor, mapUsageAreaDescription, mapUsageAreaShortcut } = Dictionaries;\n\nconst barProps = {\n minTickGap: 15,\n interval: \"preserveStart\",\n};\n\nexport const monthConfig = {\n dailyHeatConsumption: () => ({\n chartConfig: {\n settings: {\n stopAnimation: false,\n stopInteractive: false,\n title: \"\",\n showTitle: false,\n showLegend: false,\n horizontalGrid: false,\n verticalGrid: false,\n xFormatter: (e) => moment(e).format(\"YYYY-MM-DD\"),\n yFormatter: (e) => formatNumber(e, {position: -1}),\n },\n xAxis: {\n xKey: \"time\",\n description: \"Czas\",\n showDescription: false,\n color: \"#333\",\n datesNumber: 3,\n withTime: false,\n useDefault: true,\n ...barProps,\n },\n yAxises: [\n {\n id: \"0\",\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"Zużycie ciepła\",\n showDescription: true,\n unit: \"kWh\",\n rangeFrom: \"0\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n ],\n },\n chartType: CHART_TYPES.BAR_CHART,\n usedData: [\n {\n id: \"0\",\n description: \"Zużycie ciepła\",\n dataSource: \"dailyHeatConsumption\",\n axis: \"0\",\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: \"#4462ba\",\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: \"kWh\",\n },\n ],\n }),\n dailyElectricityConsumption: () => ({\n chartConfig: {\n settings: {\n stopAnimation: false,\n stopInteractive: false,\n title: \"\",\n showTitle: false,\n showLegend: false,\n horizontalGrid: false,\n verticalGrid: false,\n xFormatter: (e) => moment(e).format(\"YYYY-MM-DD\"),\n yFormatter: (e) => formatNumber(e, {position: -1}),\n },\n xAxis: {\n xKey: \"time\",\n description: \"Czas\",\n showDescription: false,\n color: \"#333\",\n datesNumber: 3,\n withTime: true,\n useDefault: true,\n ...barProps,\n },\n yAxises: [\n {\n id: \"0\",\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"Zużycie energii elekt.\",\n showDescription: true,\n unit: \"kWh\",\n rangeFrom: \"0\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n ],\n },\n chartType: CHART_TYPES.BAR_CHART,\n usedData: [\n {\n id: \"0\",\n description: \"Dzienne zużycie energii elekt.\",\n dataSource: \"dailyElectricityConsumption\",\n axis: \"0\",\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: \"#10C8CA\",\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: \"kWh\",\n },\n ],\n }),\n comparedConsumption: ({data}) => ({\n chartConfig: {\n settings: {\n stopAnimation: false,\n stopInteractive: false,\n title: \"\",\n showTitle: false,\n showLegend: false,\n horizontalGrid: false,\n verticalGrid: false,\n xFormatter: (e) => e,\n yFormatter: (e) => formatNumber(e, {position: -1}),\n },\n xAxis: {\n xKey: \"time\",\n description: \"Czas\",\n showDescription: false,\n color: \"#333\",\n datesNumber: 3,\n withTime: true,\n useDefault: true,\n ...barProps,\n },\n yAxises: [\n {\n id: \"0\",\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"Zużycie energii\",\n showDescription: true,\n unit: \"kWh\",\n rangeFrom: \"0\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n ],\n },\n chartType: CHART_TYPES.BAR_CHART,\n usedData: [\n {\n id: \"0\",\n description: \"Znormalizowane zużycie energii\",\n dataSource: \"consumption\",\n axis: \"0\",\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: \"#7FD2BE\",\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: \"kWh\",\n },\n ],\n extra: \n {currentElements.map((row, idx) => {\n const spread = Boolean(row.reduce(\n (prev, {key, enableHidden}) => prev || (shouldHideChart(key) && enableHidden),\n false));\n return (\n // eslint-disable-next-line react/no-array-index-key\n \n {row.map(({key, enableHidden, title}, idx2) =>\n \n
\n );\n })}\n \n )\n}\n\nconst Cell = ({children, loading, title, spread, hide}) => (\n \n \n {children}\n \n \n);\n\nconst Charts = styled.div`\n width: 100%;\n height: calc(100vh - 136px);\n @media (max-height: 800px) {\n height: calc(100vh - 120px);\n min-height: ${minAppHeight - 120}px;\n }\n`;\n\nconst Row = styled.div`\n & + & {\n margin-top: -8px;\n }\n`;\n\nconst StyledCell = styled.div`\n display: inline-block;\n align-items: center;\n justify-content: center;\n transition: 1000ms all;\n overflow: hidden;\n`;\n","import React from 'react';\nimport styled from 'styled-components'\nimport { message, Button, Card, Icon } from 'antd';\n\nconst email = \"monitoring@kape.gov.pl\";\nconst instructionPath = \"/Instrukcja%20obsługi%20Systemu%20KAPE%20monitoring.pdf\";\nconst instructionFileName = \"InstrukcjaMonitoring.pdf\";\n\nconst copyEmail = () => {\n const textArea = document.createElement(\"textarea\");\n textArea.value = email;\n document.body.appendChild(textArea);\n textArea.focus();\n textArea.select();\n\n try {\n const successful = document.execCommand('copy');\n if(!successful) throw new Error();\n message.success('Skopiowano email do schowka!');\n } catch (err) {\n message.warning('Nie udało się skopiować adresu do schowka');\n }\n document.body.removeChild(textArea);\n}\n\nexport default ({dashboard}) => (\n \n \n \n {dashboard && (\n Brak opomiarowanych budynków \n )}\n \n W przypadku wystąpienia problemów technicznych \n \n \n Krajowa Agencja Poszanowania Energii S.A. \n \n \n Tel. 22 626 09 10\n \n \n \n {email}\n \n \n \n \n \n Instrukcja obsługi Systemu KAPE monitoring\n \n \n \n \n \n \n \n);\n\nconst Help = styled.div`\n background: #EEF1F1;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n height: 100%;\n`;\n\nconst Message = styled.div`\n max-width: 696px;\n padding: 24px 32px 48px;\n text-align: center;\n font-size: 1.5rem;\n line-height: 2rem;\n`;\n\nconst Section = styled.div`\n & + & {\n padding-top: 48px;\n }\n`;\n\nconst InnerSection = styled.div`\n & + & {\n padding-top: 8px;\n }\n`;\n\nconst StyledCard = styled(Card)`\n position: relative;\n top: -48px;\n`;\n","import Help from './Help';\n\nexport default Help;\n","import React from 'react';\nimport Help from \"../../Help\";\n\nexport default () => (\n \n \n {timeTabs.map(({key, description}) =>\n {description} ,\n )}\n \n \n );\n}\n\nconst timeTabs = [\n {\n key: \"day\",\n description: \"Dzień\",\n },\n {\n key: \"week\",\n description: \"Tydzień\",\n },\n {\n key: \"month\",\n description: \"Miesiąc\",\n },\n {\n key: \"year\",\n description: \"Rok\",\n },\n];\n\nconst StyledRadioButton = styled(Radio.Button)`\n min-width: 80px;\n text-align: center;\n`;\n\nconst TimeSelect = styled.div`\n position: relative;\n text-align: center;\n .ant-radio-button-wrapper {\n background: #F8F8F8 !important;\n }\n .ant-radio-button-wrapper-checked {\n background: #0E4194 !important;\n border-color: #0E4194 !important;\n box-shadow: -1px 0 0 0 #0E4194;\n }\n .ant-radio-button-wrapper-checked:hover {\n box-shadow: -1px 0 0 0 #0E4194;\n }\n .ant-radio-button-wrapper-checked::before {\n background: #0E4194 !important;\n }\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { Icon } from \"antd\";\n\nexport default ({label, value, unit, loading, ...props}) => (\n\n {label} \n \n {loading\n ?\n \n {unit && {unit} }\n );\n\nconst InlineValue = styled.div`\n display: flex;\n padding: 0 8px;\n align-items: baseline\n`;\n\nconst Label = styled.span`\n font-size: 0.9em;\n @media (max-width: 1600px) {\n font-size: 0.85em;\n }\n @media (max-width: 1440px) {\n font-size: 0.75em;\n }\n`;\n\nconst Value = styled.span`\n margin-left: 6px;\n font-size: 1.2em;\n @media (max-width: 1600px) {\n font-size: 1.1em;\n }\n @media (max-width: 1440px) {\n font-size: 0.95em;\n }\n font-weight: bold;\n`;\n\nconst Unit = styled.span`\n margin-left: 2px;\n font-size: 0.9em;\n @media (max-width: 1600px) {\n font-size: 0.8em;\n }\n @media (max-width: 1440px) {\n font-size: 0.7em;\n }\n`;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { isNil } from 'lodash';\n\nimport MathParser from '../../../components/MathParser';\nimport { formatNumber, isNumberConverted, formatDownfall } from '../../../utils/formaters';\nimport InlineValue from './InlineValue';\n\nexport default ({ buildingData, weatherStationName, loading }) => {\n const getValue = ({ key, value }) => value || buildingData[key];\n const getData = ({ key, value, valueFormatter }) =>\n (v => (valueFormatter ? valueFormatter(v) : v))(getValue({ key, value }));\n\n const { goodPm10, badPm10, goodPm25, badPm25 } = buildingData || {};\n\n return (\n \n \n \n \n {elements.map(element => (\n \n {element.formatter(\n loading\n ? {\n loading,\n label: element.label,\n unit: element.unit(''),\n value: '',\n }\n : {\n value: getData(element),\n label: element.label,\n unit: element.unit(getData(element)),\n pm10: {\n good: goodPm10 || PM10.good,\n bad: badPm10 || PM10.bad,\n },\n pm25: {\n good: goodPm25 || PM25.good,\n bad: badPm25 || PM25.bad,\n },\n },\n )}\n \n ))}\n \n \n );\n};\n\nconst PM10 = {\n good: 61,\n bad: 141,\n};\n\nconst PM25 = {\n good: 37,\n bad: 85,\n};\n\nconst renderPMElement = ({ pm, ...props }) => (\n ^oC ),\n valueFormatter: value => !isNil(value) ? `${formatNumber(value, { position: -1 })}` : '',\n formatter: renderElement,\n },\n {\n key: 'downfall',\n label: 'Opady:',\n unit: (value) => (isNumberConverted(value) ? 'mm' :''),\n valueFormatter: value => !isNil(value) ? formatDownfall(value) : 'Brak',\n formatter: renderElement,\n },\n {\n key: 'humidity',\n label: 'Wilgotność:',\n unit: () => '%',\n valueFormatter: value => !isNil(value) ? `${formatNumber(value)}` : '',\n formatter: renderElement,\n },\n {\n key: 'pm25',\n label: 'PM2,5:',\n unit: () => (μg/m^3 ),\n valueFormatter: value => !isNil(value) ? `${formatNumber(value)}` : value,\n formatter: renderPM25Element,\n },\n {\n key: 'pm10',\n label: 'PM10:',\n unit: () => (μg/m^3 ),\n valueFormatter: value => !isNil(value) ? `${formatNumber(value)}` : value,\n formatter: renderPM10Element,\n },\n];\n\nconst colorPMConfig = {\n good: {\n color: 'white',\n background: '#74B885',\n },\n medium: {\n color: 'white',\n background: '#FFDF82',\n },\n bad: {\n color: 'white',\n background: '#C9776B',\n },\n};\n\nconst StyledInlineValue = ({ ...props }) => {\n const { value, good, bad } = props;\n const isValid = value !== undefined && value !== null;\n let type;\n if (isValid) {\n const isGood = value < good;\n const isBad = value > bad;\n // eslint-disable-next-line no-nested-ternary\n type = !(isGood || isBad) ? 'medium' : isGood ? 'good' : 'bad';\n }\n return isValid ? (\n \n \n \n \n \n \n \n \n );\n};\n\nconst TimeSelectContainer = styled.div`\n padding: 0 24px;\n`;\n\nconst CurrentDataContainer = styled.div`\n position: absolute;\n right: 20px;\n bottom: 12px;\n`;\n\nconst BuildingSelectContainer = styled.div`\n width: 248px;\n`;\n\nconst TopBar = styled.div`\n position: relative;\n height: 80px;\n padding: 24px 16px;\n display: flex;\n @media (max-height: 800px) {\n height: 64px;\n padding: 16px;\n }\n`;\n","import React, {useContext, useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport moment from 'moment';\nimport { message } from 'antd';\n\nimport { minAppHeight, minAppWidth, navWidth, topBarHeight } from '../../constants';\n\nimport BuildingDetails from './scenes/BuildingDetails';\nimport Charts from './scenes/Charts';\nimport NoBuildings from './scenes/NoBuildings';\nimport TopBar from './scenes/TopBar';\n\nimport {\n getBuildingData,\n getBuildingTime,\n} from './services/api';\n\nimport { DashboardContext } from './DashboardDataProvider';\nimport { AppContext } from '../../AppDataProvider';\n\nexport default () => {\n const {\n currentTime,\n getCurrentTime,\n currentBuildingId,\n currentBuilding,\n setBuildings,\n // Pobierane danych\n endFetchingData,\n endFetchingTime,\n depricateHourData,\n depricateDailyData,\n } = useContext(DashboardContext);\n const { measuredBuildings, wrapRequest } = useContext(AppContext);\n if(!measuredBuildings || measuredBuildings.length === 0) return (\n \n \n \n \n \n );\n\n async function resetHourData() {\n const building = currentBuilding();\n if( building.id !== null ) {\n depricateHourData();\n fetchBuildingData(building.id);\n const time = getCurrentTime();\n if(['day', 'week'].includes(time)) {\n fetchBuildingTime(building.id, time);\n }\n }\n }\n\n async function resetDailyData() {\n const building = currentBuilding();\n if( building.id !== null ) {\n depricateDailyData();\n fetchBuildingData(building.id);\n const time = getCurrentTime();\n if(['month', 'year'].includes(time)) {\n fetchBuildingTime(building.id, time);\n }\n }\n }\n\n async function fetchBuildings() {\n if(currentBuildingId !== null) {\n fetchBuildingData(currentBuildingId);\n }\n else {\n const { id } = measuredBuildings[0];\n setBuildings(measuredBuildings, id);\n fetchBuildingData(id);\n fetchBuildingTime(id, currentTime);\n }\n }\n\n async function fetchBuildingData(id) {\n await wrapRequest(() => getBuildingData(id), {\n onError: () => {\n message.error('Nie udało się pobrać danych o zużyciach. Jeśli sytuacja się będzie powtarzać, prośba o kontakt z administracją serwisu.');\n },\n onSuccess: (data) => {\n endFetchingData(id, data);\n },\n });\n }\n\n async function fetchBuildingTime(id, time) {\n await wrapRequest(() => getBuildingTime(id, time), {\n onError: () => {\n message.error('Nie udało się pobrać danych do wykresów. Jeśli sytuacja się będzie powtarzać, prośba o kontakt z administracją serwisu.');\n },\n onSuccess: (data) => {\n endFetchingTime(id, data, time);\n },\n });\n }\n}\n\nconst secondsToMidnight = () => {\n const mmt = moment();\n const mmtMidnight = mmt.clone().endOf('day');\n return mmtMidnight.diff(mmt, 'seconds') + 1;\n}\n\n\nconst Dashboard = styled.div`\n background: #EEF1F1;\n display: flex;\n flex-direction: column;\n position: relative;\n height: 100%;\n min-height: ${minAppHeight - topBarHeight}px;\n min-width: ${minAppWidth - navWidth}px;\n`;\n\nconst DashboardInner = styled.div`\n display: flex;\n flex: 1;\n position: relative;\n`;\n\nconst ChartsContainer = styled.div`\n flex: 1;\n position: relative;\n`;\n","import Dashboard from './Dashboard';\n\nexport default Dashboard;\n","import axios from 'axios';\nimport moment from 'moment';\n\nimport { mapMulti, mapListData} from '../../Dashboard/services/api';\n\n\nexport const getReportData = async ({period, userId}) => {\n const request = {\n startDate: moment(period[0]).startOf('month').toISOString(),\n endDate: moment(period[1]).endOf('month').toISOString(),\n userId: parseInt(userId.substring(5), 10),\n }\n const resp = await axios.post(`/Reports`, request);\n\n return {\n ...resp,\n data: {\n buildingsUsages: getBuildingsUsages(resp.data.buildingsUsages),\n pms: mapMulti({data: resp.data.pms || []}),\n config: {\n period,\n userId,\n },\n request,\n },\n }\n};\n\nconst getBuildingsUsages = (buildingsUsages = []) => buildingsUsages.map(\n ({temperatures, heatingCurve, climateIndex, hourlyElectricity, hourlyHeat, ...rest}) => ({\n ...rest,\n unitElectricityTotal: rest.electricityTotal / rest.area,\n unitHeatTotal: rest.heatTotal / rest.area,\n unitWaterTotal: rest.waterTotal / rest.area,\n temperatures: mapMulti({\n data: temperatures || [],\n settings: {\n limitMin: rest.minTempThreshold,\n limitMax: rest.maxTempThreshold,\n },\n }, false),\n heatingCurve: mapMulti({data: heatingCurve || []}, false),\n climateIndex: mapMulti({data: climateIndex.map(({time, cold, good, hot}) => ({\n time,\n cold: 100 * cold,\n good: 100 * good,\n hot: 100 * hot,\n })) || []}),\n hourlyElectricity: mapListData(hourlyElectricity || [], 'electricityPower'),\n hourlyHeat: mapListData(hourlyHeat || [], 'heatPower'),\n }));\n","import React from 'react';\nimport styled from 'styled-components';\nimport moment from 'moment';\n\nimport { DatePicker } from 'antd';\nimport FormItemWrapper from './FormItemWrapper';\n\nconst { MonthPicker } = DatePicker;\n\nexport default ({onChange, value = [], formRules = {}}) => {\n const now = moment().startOf('month');\n\n const disabledDate = (time) => time.isSameOrAfter(now);\n\n const _onChange = ([first, second], isValid) => {\n if(!(first && second)) {\n onChange([first, second], isValid);\n }\n else {\n onChange(second.isBefore(first) ? [second, first] : [first, second], isValid);\n }\n }\n const onFirst = (v, isValid) => _onChange([v, value[1]], isValid);\n const onSecond = (v, isValid) => _onChange([value[0], v], isValid);\n\n return (\n \n Od \n \n \n \n Do \n \n \n \n );\n};\n\nconst PeriodSelect = styled.div`\n display: flex;\n margin-left: -24px;\n`;\n\nconst Description = styled.span`\n margin: 0 8px 0 24px;\n font-weight: bold;\n line-height: 32px;\n`;\n","import React, { useState, useEffect } from 'react';\nimport styled from 'styled-components';\nimport { Button, Form } from 'antd';\n\nimport { UserSelect } from '../../../components/BuildingSelect';\nimport PeriodSelect from '../../../components/PeriodSelect';\nimport FormItemWrapper, { validate } from '../../../components/FormItemWrapper';\n\nexport default ({loadData, config = {}, onChange}) => {\n const [_userId, setUserId] = useState();\n const [_period, setPeriod] = useState();\n const [triggered, setTriggered] = useState(false);\n\n useEffect(() => {\n setUserId(config.userId);\n }, [config.userId]);\n\n useEffect(() => {\n setPeriod(config.period || []);\n }, [config.period]);\n\n const rules = Object.keys(formRules).reduce((prev, key) => ({\n ...prev,\n [key]: {\n ...formRules[key],\n triggered,\n },\n }), {});\n\n const onReset = () => {\n setTriggered(false);\n }\n\n const onSubmit = async (event) => {\n event.preventDefault();\n setTriggered(true);\n const toValidate = [\n {key: 'community', value: _userId},\n {key: 'from', value: _period[0]},\n {key: 'to', value: _period[1]},\n ];\n const isValid = toValidate.map(({key, value}) => validate({\n ...rules[key],\n value,\n rules: rules[key] ? (rules[key].rules || []) : [],\n })).reduce((prev, {validateStatus}) => prev && validateStatus !== 'error', true);\n if(!isValid) {\n setTriggered(true);\n }\n else {\n loadData({\n community: _userId,\n period: _period,\n });\n onReset();\n }\n }\n\n const onChangeUserId = (id, isValid) => isValid\n ? onChange({...config, userId: id})\n : setUserId(id);\n \n const onChangePeriod = (per, isValid) => isValid\n ? onChange({...config, period: per})\n : setPeriod(per);\n\n return (\n\n \n \n \n \n \n \n \n \n \n \n \n Pobierz dane \n \n \n \n );\n}\n\nconst formRules = {\n userId: {\n required: true,\n hasIcon: true,\n },\n from: {\n required: true,\n },\n to: {\n required: true,\n },\n};\n\nconst ReportConfigForm = styled.div`\n margin-bottom: -16px;\n`;\n\nconst CommunityContainer = styled.div`\n width: 280px;\n`;\n\nconst ButtonContainer = styled.div`\n padding: 0 0 32px 16px;\n`;\n\nconst TopSelectItem = styled.div`\n display: inline-block;\n vertical-align: middle;\n & + & {\n margin-left: 16px;\n }\n`;\n","import React from 'react';\n\nimport { Modal } from 'antd';\n\nexport default ({visible, onOk, onCancel, ...props}) =>\n (\n {`Wczytanie nowych danych spowoduje przeładowanie generacji raportu.\n Przy braku zapisu spowoduje to utratę wykonanej pracy.`}\n );\n","import React from 'react';\nimport styled from 'styled-components';\n\nconst BottomContainer = styled.div`\n max-width: 959px;\n height: 74px;\n position: relative;\n border-top: solid 1px #333;\n`;\n\nconst Bottom = styled.div`\n position: absolute;\n bottom: 0;\n right: 0;\n color: black;\n text-align: right;\n height: 64px;\n div {\n height: 15px;\n line-height: 15px;\n font-size: 12px;\n }\n div:first-child {\n font-weight: bold;\n color: darkblue;\n }\n`;\n\nexport default () => (\n \n \n KRAJOWA AGENCJA POSZANOWANIA ENERGII SA
\n Al. Jerozolimskie 65/79, 00-697 Warszawa
\n tel.: 22 626-09-10, 696-89-55, fax: 22 626-09-11
\n e-mail: kape@kape.gov.pl, www.kape.gov.pl
\n \n );\n","import styled from 'styled-components';\n\nexport default styled.div`\n padding: 32px 0;\n position: relative;\n @media print {\n padding: 0;\n page-break-before: always;\n page-break-after: always;\n color: black !important;\n }\n`;\n","import React from 'react';\nimport styled from 'styled-components';\nimport moment from 'moment';\n\nimport Page from './Page';\nimport Logo, {LOGO_SIZES} from '../../../components/Logo';\nimport { formatPeriod } from '../../../utils/formaters';\n\nexport default ({config, user, creationDate, ...props}) => (\n \n \n \n Raport z monitoringu zużycia energii \n {user.name} \n {`Raport za okres: ${formatPeriod(config.startDate, config.endDate)}`} \n \n \n \n \n | Wykonawca | \n Krajowa Agencja Poszanowania Energii SA | \n
\n \n | \n Al. Jerozolimskie 65/79 | \n
\n \n | \n 00-697 Warszawa | \n
\n \n
\n \n {moment(creationDate).format('MMMM YYYY')} \n );\n\nconst StyledFrontPage = styled(Page)`\n display: none;\n @media print {\n min-width: 960px;\n min-height: 100%;\n display: block;\n page-break-before: always;\n page-break-after: always;\n color: black !important;\n z-index: 1;\n background: white;\n }\n`;\n\nconst Title = styled.div`\n font-size: 42px;\n text-align: center;\n padding-top: 152px;\n height: 280px;\n`;\n\nconst LogoHolder = styled.div`\n padding-top: 80px;\n text-align: center;\n`;\n\nconst MainTitle = styled.div`\n padding-top: 100px;\n font-size: 48px;\n text-align: center;\n font-weight: bold;\n`;\n\nconst ReportDate = styled.div`\n padding-top: 108px;\n font-size: 28px;\n text-align: center;\n font-weight: bold;\n`;\n\nconst TableWrapper = styled.div`\n padding-top: 300px;\n`;\n\nconst Table = styled.table`\n border: none;\n`;\n\nconst Cell = styled.td`\n font-size: 24px;\n line-height: 32px;\n color: black !important;\n font-weight: bold;\n`;\n\nconst Row = styled.tr`\n ${Cell}:first-child {\n padding-right: 48px;\n }\n`;\n\nconst Month = styled.div`\n padding-top: 132px;\n font-size: 24px;\n text-align: center;\n font-weight: bold;\n`;\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport Logo, { LOGO_SIZES } from '../../../components/Logo';\n\nconst Top = styled.div`\n text-align: left;\n height: 100px;\n`;\n\nexport default () => (\n \n \n );","import React from 'react';\nimport styled from 'styled-components';\n\nexport const PdfContainer = ({padding: {top, bottom} = {}, children, props}) => (\n \n {top ? \n \n \n {children}\n \n \n \n );\n\nconst TopPlaceHolder = ({size, ...props}) => (\n \n \n \n
\n \n \n );\n\nconst BottomPlaceHolder = ({size, ...props}) => (\n \n \n \n
\n \n \n );\n\nconst StyledTable = styled.table`\n table-layout: fixed;\n width: 960px;\n\n thead {display: none;}\n\n tfoot {display: none;}\n\n @media print {\n thead {display: table-header-group;} \n tfoot {display: table-footer-group;}\n }\n`;\n\nexport const PdfHeader = styled.div`\n position: fixed;\n top: 0;\n width: 100%;\n display: none;\n\n @media print {\n display: block;\n }\n`;\n\nexport const PdfFooter = styled.div`\n position: fixed;\n bottom: 0;\n width: 100%;\n display: none;\n\n @media print {\n display: block;\n }\n`;\n","import React from 'react';\nimport styled from 'styled-components';\n\nexport default ({to, children, prefix, ...props}) => (\n \n {prefix && ({prefix} )}\n {to ? {children} : children}\n );\n\nconst PageHeading = styled.div`\n font-weight: bold;\n font-size: 28px;\n padding: 8px 0 16px;\n color: darkblue\n`;\n\nconst StyledHref = styled.a`\n color: inherit;\n text-decoration: inherit;\n`;\n\nconst Prefix = styled.span`\n min-width: 24px;\n padding-right: 32px;\n`;\n","import React from 'react';\nimport styled from 'styled-components';\n\nconst List = ({prefix, children, title, ...props}) =>\n \n {title && (- {title}
)}\n {React.Children.map(children, (child, index) => \n React.cloneElement(child, {prefix: prefix ? `${prefix}${index + 1}.`: `${index + 1}.`}),\n )}\n \n\nconst StyledList = styled.div`\n & + & {\n padding-top: 16px;\n }\n`;\n\nconst Item = ({prefix, children, ...props}) => (\n \n {prefix} \n {children}\n \n);\n\nconst StyledItem = styled.div`\n font-size: 20px;\n line-height: 28px;\n padding: 4px 0;\n @media print {\n color: black\n }\n`;\n\nconst Index = styled.span`\n min-width: 16px;\n margin-right: 24px;\n`;\n\nObject.assign(List, {\n Item,\n});\n\nexport default List;\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport Page from './Page';\nimport PageHeading from './PageHeading';\nimport List from './List';\n\nexport default ({buildings}) => (\n \n \n Spis treści\n \n \n \n Przedmiot raportu \n \n \n Wnioski \n \n \n Analiza dla wszystkich budynków \n \n Analiza dla budynków opomiarowanych}\n >\n {buildings.map(({buildingId, fullName}) => (\n \n {fullName} \n \n ))}\n
\n \n );\n\nexport const genReportLink = (id) => `Building_${id}`;\n\nconst CustomLink = styled.a`\n text-decoration: none;\n color: darkblue;\n`;\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport CustomChart from '../../../components/CustomChart';\n\nexport default styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 8px 0;\n @media print {\n page-break-inside: avoid;\n }\n & + & {\n padding-top: 24px;\n }\n`;\n\nexport const CHART_SIZES = Object.freeze({\n SMALL: 'small',\n MEDIUM: 'medium',\n SPREAD: 'spread',\n BIG: 'big',\n});\n\nconst sizes = {\n [CHART_SIZES.SMALL]: {\n height: '200px',\n width: '300px',\n },\n [CHART_SIZES.MEDIUM]: {\n height: '300px',\n width: '464px',\n },\n [CHART_SIZES.SPREAD]: {\n height: '300px',\n width: '944px',\n },\n [CHART_SIZES.BIG]: {\n height: '600px',\n width: '944px',\n },\n};\n\nconst defaultSize = CHART_SIZES.MEDIUM;\n\nexport const ChartHolderItem = styled.div`\n height: ${({size}) => sizes[size || defaultSize].height}\n width: ${({size}) => sizes[size || defaultSize].width}\n margin: auto;\n padding: 0 8px;\n`;\n\nexport const WrappedChart = ({chartSize, ...props}) =>\n (\n );\n","import { CHART_SIZES } from '../../components/ChartHolder';\nimport { formatNumber } from '../../../../utils/formaters';\nimport { colors } from '../../../../components/ColorSelect';\nimport { CHART_TYPES } from '../../../../components/CustomChart';\n\nconst colorMapper = ({idx}) => colors[idx % colors.length].color;\nconst buildingColorMapper = (building, id) => colorMapper({idx: id});\n\nconst pieChartConfig = {\n chartType: CHART_TYPES.PIE_CHART,\n chartSize: CHART_SIZES.SMALL,\n\n isAnimationActive: false,\n showEmpty: false,\n showLabel: false,\n showTitle: false,\n showTooltip: false,\n\n innerRadius: \"0%\",\n outerRadius: \"85%\",\n\n descriptionKey: \"shortName\",\n unit: \"kWh\",\n\n colorMapper,\n dataFormatter: (e) => formatNumber(e, {position: 0}),\n};\n\nexport default Object.assign({\n heatToArea: {\n chartConfig: {\n settings: {\n stopAnimation: true,\n stopInteractive: true,\n title: \"Zależność jednostkowego zużycia ciepła od powierzchni budynku\",\n showTitle: true,\n showLegend: false,\n horizontalGrid: true,\n verticalGrid: false,\n xFormatter: (e) => formatNumber(e, {position: 0}),\n yFormatter: (e) => formatNumber(e, {position: 1}),\n },\n xAxis: {\n xKey: \"unitHeatTotal\",\n description: \"Jednostkowe zużycie ciepła\",\n showDescription: true,\n color: \"#333\",\n unit: \"kWh/m^2\",\n rangeFrom: \"auto\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n yAxises: [\n {\n id: \"0\",\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"Powierzchnia budynku\",\n showDescription: true,\n unit: \"m^2\",\n rangeFrom: \"auto\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n ],\n },\n chartType: CHART_TYPES.SCATTERED_CHART,\n chartSize: CHART_SIZES.BIG,\n usedData: [\n {\n id: \"0\",\n axis: \"0\",\n descriptionId: \"shortName\",\n showDescription: true,\n dataSource: \"area\",\n radius: 10,\n lineWidth: 2,\n lineColor: \"#063951\",\n unit: \"m^2\",\n },\n ],\n },\n electricityToArea: {\n chartConfig: {\n settings: {\n stopAnimation: true,\n stopInteractive: true,\n title: \"Zależność jednostkowego zużycia energii elektrycznej od powierzchni budynku\",\n showTitle: true,\n showLegend: false,\n horizontalGrid: true,\n verticalGrid: false,\n xFormatter: (e) => formatNumber(e, {position: 0}),\n yFormatter: (e) => formatNumber(e, {position: 1}),\n },\n xAxis: {\n xKey: \"unitElectricityTotal\",\n description: \"Jednostkowe zużycie energii elektrycznej\",\n showDescription: true,\n color: \"#333\",\n unit: \"kWh/m^2\",\n rangeFrom: \"auto\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n yAxises: [\n {\n id: \"0\",\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"Powierzchnia budynku\",\n showDescription: true,\n unit: \"m^2\",\n rangeFrom: \"auto\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n ],\n },\n chartType: CHART_TYPES.SCATTERED_CHART,\n chartSize: CHART_SIZES.BIG,\n usedData: [\n {\n id: \"0\",\n axis: \"0\",\n descriptionId: \"shortName\",\n showDescription: true,\n dataSource: \"area\",\n radius: 10,\n lineWidth: 2,\n lineColor: \"#063951\",\n unit: \"m^2\",\n },\n ],\n },\n electricityUsageByBuildings: {\n ...pieChartConfig,\n dataKey: \"electricityTotal\",\n },\n heatUsageByBuildings: {\n ...pieChartConfig,\n dataKey: \"heatTotal\",\n },\n waterUsageByBuildings: {\n ...pieChartConfig,\n dataKey: \"waterTotal\",\n },\n buildingColorMapper,\n pm: {\n chartConfig: {\n settings: {\n stopAnimation: true,\n stopInteractive: true,\n title: \"Wyniki pomiarów stężenia pyłów\",\n showTitle: true,\n showLegend: true,\n horizontalGrid: true,\n verticalGrid: true,\n yFormatter: (e) => formatNumber(e, {position: -1}),\n },\n xAxis: {\n xKey: \"time\",\n description: \"Czas\",\n showDescription: false,\n color: \"#333\",\n datesNumber: 4,\n withTime: false,\n },\n yAxises: [\n {\n id: \"0\",\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"Stężenie pyłów\",\n showDescription: true,\n unit: \"μg/m^3\",\n rangeFrom: \"0\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n ],\n },\n chartType: CHART_TYPES.LINE_CHART,\n chartSize: CHART_SIZES.BIG,\n usedData: [\n {\n id: \"0\",\n description: \"PM2,5\",\n dataSource: \"pm25\",\n axis: \"0\",\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: colors[0].color,\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: \"μg/m^3\",\n },\n {\n id: \"1\",\n description: \"PM10\",\n dataSource: \"pm10\",\n axis: \"0\",\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: colors[1].color,\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: \"μg/m^3\",\n },\n ],\n },\n});\n","import { CHART_SIZES } from '../../components/ChartHolder';\nimport { formatNumber } from '../../../../utils/formaters';\nimport { CHART_TYPES } from '../../../../components/CustomChart';\n\nexport default Object.assign({\n climateIndex: () => ({\n chartConfig: {\n settings: {\n stopAnimation: true,\n stopInteractive: true,\n title: \"Indeks klimatyczny\",\n showTitle: true,\n showLegend: true,\n horizontalGrid: true,\n verticalGrid: true,\n stackData: true,\n yFormatter: (e) => formatNumber(e, {position: -1}),\n },\n xAxis: {\n xKey: \"time\",\n description: \"Czas\",\n showDescription: false,\n color: \"#333\",\n datesNumber: 4,\n withTime: false,\n },\n yAxises: [\n {\n id: \"0\",\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"Zużycie ciepła\",\n showDescription: false,\n unit: \"%\",\n rangeFrom: \"0\",\n rangeTo: \"100\",\n rangeSpan: \"25\",\n },\n ],\n },\n chartType: CHART_TYPES.AREA_CHART,\n chartSize: CHART_SIZES.SPREAD,\n usedData: [\n {\n id: \"0\",\n description: \"Procent temp. w normie\",\n dataSource: \"good\",\n axis: \"0\",\n lineWidth: 2,\n lineColor: \"#556B3E\",\n unit: \"%\",\n },\n {\n id: \"1\",\n description: \"Procent zbyt niskiej temp.\",\n dataSource: \"cold\",\n axis: \"0\",\n dotted: false,\n lineWidth: 2,\n lineColor: \"#063951\",\n unit: \"%\",\n },\n {\n id: \"2\",\n description: \"Procent zbyt wysokiej temp.\",\n dataSource: \"hot\",\n axis: \"0\",\n lineWidth: 2,\n lineColor: \"#C13015\",\n unit: \"%\",\n },\n ],\n }),\n temperatures: ({settings}) => ({\n chartConfig: {\n settings: {\n stopAnimation: true,\n stopInteractive: true,\n\n showLegend: false,\n horizontalGrid: true,\n verticalGrid: true,\n\n title: \"Zależność temperatury wewnętrznej od zewnętrznej\",\n showTitle: true,\n\n xFormatter: (e) => formatNumber(e, {position: -1}),\n yFormatter: (e) => formatNumber(e, {position: -1}),\n },\n ...(settings.limitMin && settings.limitMax && {\n areas: [\n {\n axis: \"0\",\n color: \"green\",\n opacity: 0.3,\n from: settings.limitMin,\n to: settings.limitMax,\n },\n ],\n }),\n xAxis: {\n xKey: \"outsideTemperature\",\n color: \"#333\",\n showAxis: true,\n description: \"Śr. dzienna temperatura zewnętrzna\",\n showDescription: true,\n unit: \"^oC\",\n rangeFrom: \"auto\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n yAxises: [\n {\n id: \"0\",\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"Śr. dzienna temperatura wewnętrzna\",\n showDescription: true,\n unit: \"^oC\",\n rangeFrom: \"auto\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n ],\n },\n chartType: CHART_TYPES.LINE_CHART,\n chartSize: CHART_SIZES.BIG,\n usedData: [\n {\n id: \"0\",\n description: \"Śr. dzienna temperatura wewnętrzna\",\n dataSource: \"insideTemperature\",\n axis: \"0\",\n dotted: true,\n lineWidth: 2,\n lineColor: \"#063951\",\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: \"^oC\",\n showRegresion: false,\n addRegresionBoundary: false,\n spreadRegresion: false,\n },\n ],\n }),\n heatingCurve: () => ({\n chartConfig: {\n settings: {\n stopAnimation: true,\n stopInteractive: true,\n\n showLegend: false,\n horizontalGrid: true,\n verticalGrid: true,\n showRegression: true,\n regresionPosition: 'left',\n\n title: \"Charakterystyka energetyczna budynku\",\n showTitle: true,\n\n xFormatter: (e) => formatNumber(e, {position: -1}),\n yFormatter: (e) => formatNumber(e, {position: -1}),\n },\n xAxis: {\n xKey: \"outsideTemperature\",\n color: \"#333\",\n showAxis: true,\n description: \"Temperatura zewnętrzna\",\n showDescription: true,\n unit: \"^oC\",\n rangeFrom: \"-20\",\n rangeTo: \"12\",\n rangeSpan: \"8\",\n },\n yAxises: [\n {\n id: \"0\",\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"Dzienne zuż. ciepła\",\n showDescription: true,\n unit: \"kWh\",\n rangeFrom: \"auto\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n ],\n },\n chartType: CHART_TYPES.LINE_CHART,\n chartSize: CHART_SIZES.SPREAD,\n usedData: [\n {\n id: \"0\",\n description: \"Dzienne zużycie ciepła\",\n dataSource: \"heatConsumption\",\n axis: \"0\",\n dotted: true,\n lineWidth: 2,\n lineColor: \"#063951\",\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: \"kWh\",\n showRegresion: true,\n addRegresionBoundary: true,\n spreadRegresion: true,\n },\n ],\n }),\n hourlyHeat: ({settings}) => ({\n chartConfig: {\n settings: {\n stopAnimation: true,\n stopInteractive: true,\n title: \"Przebieg poboru ciepła\",\n showTitle: true,\n showLegend: false,\n horizontalGrid: true,\n verticalGrid: true,\n yFormatter: (e) => formatNumber(e, {position: -1}),\n },\n ...(settings.limit && {\n limits: [\n {\n description: null,\n axis: \"0\",\n lineWidth: 2,\n lineColor: \"#C9776B\",\n dashLength: 10,\n dashSpacing: 15,\n value: settings.limit,\n },\n ],\n }),\n xAxis: {\n xKey: \"time\",\n description: \"Czas\",\n showDescription: false,\n color: \"#333\",\n datesNumber: 4,\n withTime: false,\n },\n yAxises: [\n {\n id: \"0\",\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"Pobór mocy cieplnej\",\n showDescription: true,\n unit: \"kW\",\n rangeFrom: \"0\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n ],\n },\n chartType: CHART_TYPES.LINE_CHART,\n chartSize: CHART_SIZES.SPREAD,\n usedData: [\n {\n id: \"0\",\n description: \"Pobór mocy cieplnej\",\n dataSource: \"heatPower\",\n axis: \"0\",\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: \"#0E4194\",\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: \"kW\",\n },\n ],\n }),\n hourlyElectricity: ({settings}) => ({\n chartConfig: {\n settings: {\n stopAnimation: true,\n stopInteractive: true,\n title: \"Przebieg poboru energii elektrycznej\",\n showTitle: true,\n showLegend: false,\n horizontalGrid: true,\n verticalGrid: true,\n yFormatter: (e) => formatNumber(e, {position: -1}),\n },\n ...(settings.limit && {\n limits: [\n {\n description: null,\n axis: \"0\",\n lineWidth: 2,\n lineColor: \"#C9776B\",\n dashLength: 10,\n dashSpacing: 15,\n value: settings.limit,\n },\n ],\n }),\n xAxis: {\n xKey: \"time\",\n description: \"Czas\",\n showDescription: false,\n color: \"#333\",\n datesNumber: 4,\n withTime: false,\n },\n yAxises: [\n {\n id: \"0\",\n color: \"#333\",\n showAxis: true,\n side: \"left\",\n description: \"Pobór mocy elektrycznej\",\n showDescription: true,\n unit: \"kW\",\n rangeFrom: \"0\",\n rangeTo: \"auto\",\n rangeSpan: \"auto\",\n },\n ],\n },\n chartType: CHART_TYPES.LINE_CHART,\n chartSize: CHART_SIZES.SPREAD,\n usedData: [\n {\n id: \"0\",\n description: \"Pobór mocy elektrycznej\",\n dataSource: \"electricityPower\",\n axis: \"0\",\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: \"#0E4194\",\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit: \"kW\",\n },\n ],\n }),\n})\n","import allBuildings from './allBuildings';\nimport measuredBuilding from './measuredBuilding';\n\nexport default Object.assign({\n allBuildings,\n measuredBuilding,\n});\n","import React from 'react';\nimport styled from 'styled-components';\n\nexport default ({buildings, buildingColorMapper, ...props}) => (\n \n Legenda \n {buildings.map((e, id) =>(\n \n {e.fullName} \n ))}\n \n);\n\nconst BuildingsLegend = styled.div`\n color: black;\n text-align: left;\n`;\n\nconst BuildingColor = styled.div`\n font-size: 16px;\n & + & {\n padding-top: 4px;\n }\n`;\n\nconst Legend = styled.div`\n font-size: 20px;\n padding: 0 0 4px 20px;\n font-size: bold;\n`;\n\nconst Color = styled.div`\n background: ${({color}) => color};\n display: inline-block;\n vertical-align: text-bottom;\n height: 16px;\n width: 16px;\n border-radius: 50%;\n margin-right: 4px;\n`;\n","import React, {useState} from 'react';\nimport styled from 'styled-components';\nimport {Input} from 'antd';\n\nexport default ({comment = '', refId, ...props}) => {\n const [value, changeValue] = useState(comment);\n\n const _onChange = (event) => {\n const v = event && event.target && event.target.value;\n changeValue(v);\n }\nreturn (\n)\n};\n\nconst StyledConclusion = styled.div`\n padding: 16px 0 32px;\n`;\n\nconst UsedInput = styled.div`\n @media print {\n display: none;\n }\n`;\n\nconst ResultValue = styled.div`\n font-size: 18px;\n display: none;\n white-space: pre-line;\n @media print {\n display: block;\n }\n`;\n","import React from 'react';\nimport styled from 'styled-components';\n\nconst Row = styled.div`\n display: table-row;\n`;\n\nconst StyledCell = styled.div`\n display: table-cell;\n border: solid 1px black;\n @media print {\n page-break-inside: avoid;\n }\n`;\n\nconst CellInner = styled.div`\n padding: 8px;\n min-height: 24px;\n`;\n\nconst Table = styled.div`\n display: table;\n width: 100%;\n table-layout: fixed;\n border-collapse: collapse;\n border: ${({noBorder}) => noBorder ? 'none' : 'solid 2px black'};\n color: black;\n text-align: center;\n\n ${Row}:first-child {\n font-weight: bold;\n ${StyledCell} {\n border: ${({noBorder}) => noBorder ? 'none' : 'solid 2px black'};\n }\n }\n ${StyledCell} {\n ${({noBorder}) => noBorder ? 'border: none' : ''}\n }\n`;\n\nconst Cell = ({children, ...props}) => (\n \n \n {children}\n \n );\n\nexport default Object.assign(\n (props) => (),\n {\n Row,\n Cell,\n },\n);\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport chartConfig from './chartsConfig';\n\nimport ChartHolder, { WrappedChart } from '../components/ChartHolder';\nimport Page from '../components/Page';\nimport BuildingsLegend from '../components/BuildingsLegend';\nimport Conclusion from '../components/Conclusion';\nimport PageHeading from '../components/PageHeading';\nimport Table from '../components/Table';\nimport MathParser from '../../../components/MathParser';\nimport { formatNumber, formatPeriod } from '../../../utils/formaters';\n\nexport default ({config, comments = {}, data=[], pms, ...props}) =>\n (\n \n Analiza dla wszystkich budynków\n \n \n \n {`Zestawienie zużycia mediów w budynkach w okresie: ${formatPeriod(config.startDate, config.endDate)}`}\n \n \n \n Budynek \n \n Zużycie energii elektrycznej [kWh] \n \n \n Zużycie ciepła [kWh] \n \n \n Zużycie wody [m^3] \n \n \n {data.map(({buildingId, fullName, electricityTotalWithInvoices, heatTotallWithInvoices, waterTotallWithInvoices}) => (\n \n {fullName} \n {formatNumber(electricityTotalWithInvoices, {position: -1})} \n {formatNumber(heatTotallWithInvoices, {position: -1})} \n {formatNumber(waterTotallWithInvoices, {position: -1})} \n \n ))}\n
\n \n \n \n \n \n \n \n \n \n Udział budynków w całkowitym zużyciu ciepła\n \n \n Udział budynków w całkowitym zużyciu energii elektrycznej\n \n \n Udział budynków w całkowitym zużyciu wody\n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n );\n\nconst TableHeader = styled.div`\n padding: 8px 0;\n height: 40px;\n font-size: 18px;\n`;\n\nconst TableWrapper = styled.div`\n padding: 24px 0;\n`;\n\nconst UsageWrapper = styled.div`\n padding-top: 72px;\n`;\n\nconst BuildingsLegendWrapper = styled.div`\n padding-bottom: 24px;\n`;\n","import React from 'react';\n\nimport chartConfig from './chartsConfig';\n\nimport ChartHolder, { WrappedChart } from '../components/ChartHolder';\nimport Conclusion from '../components/Conclusion';\nimport Page from '../components/Page';\nimport PageHeading from '../components/PageHeading';\nimport { genReportLink } from '../components/ReportNavigation';\n\nexport default ({\n data,\n comments = {},\n id,\n ...props\n}) => (\n {(id === 0) && (\n \n Analiza dla budynków opomiarowanych\n )}\n \n {data.fullName}\n \n \n \n \n \n \n \n \n \n \n \n );\n\nconst passedChartConfig = (data, key) =>\n({\n data: data[key].data,\n ...chartConfig.measuredBuilding[key](data[key]),\n});\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport Page from '../components/Page';\nimport PageHeading from '../components/PageHeading';\nimport Conclusion from '../components/Conclusion';\n\nexport default ({comments = {}, ...props}) =>\n (\n \n \n Przedmiot raportu\n \n \n Wnioski\n \n \n );\n\n// WONTFIX jest jakis problem z ustawianiem pierwszego pola i sie rozciaga\nconst IntroductionWrapper = styled.div`\n margin: 24px 0;\n padding: 24px 0;\n`;\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport Footer from '../components/Footer';\nimport FrontPage from '../components/FrontPage';\nimport Header from '../components/Header';\nimport { PdfHeader, PdfFooter, PdfContainer } from '../components/PdfComponents';\nimport ReportNavigation from '../components/ReportNavigation';\nimport AllBuildings from './AllBuildings';\nimport BuildingReport from './BuildingReport';\nimport Introduction from './Introduction';\n\nexport default ({\n request,\n user,\n creationDate,\n allBuildings,\n measuredBuildings,\n pms,\n printRef,\n comments = {},\n ...props\n}) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nconst StyledReportGeneration = styled.div`\n position: relative;\n background: #EEF1F1;\n margin: 0 -20px;\n padding: 24px 0;\n`;\n\nconst ReportInner = styled.div`\n position: relative;\n margin: auto;\n max-width: 1224px;\n background: white;\n min-height: 1600px;\n`;\n\nconst ReportContent = styled.div`\n position: relative;\n padding: 24px 0;\n width: 960px;\n margin: auto;\n @media print {\n padding: 0;\n }\n`;\n","import React from 'react';\nimport styled from 'styled-components';\n\nconst Section = ({title, children, ...props}) => (\n \n {title && ({title} )}\n {children}\n \n);\n\nconst Title = styled.div`\n font-weight: bold;\n padding: 3px 0 16px;\n`;\n\nconst StyledSection = styled.div`\n & + & {\n padding-top: 16px;\n }\n`;\n\nexport default Object.assign(\n Section,\n {\n Title,\n },\n);\n","import React from 'react';\nimport styled from 'styled-components';\nimport { Button, Icon } from 'antd';\n\n\nexport default ({isSticky, isData, ...props}) => (\n \n \n {isData && (\n {isSticky && (\n )}\n \n Do dołu\n \n )}\n \n \n);\n\nconst StyledStickySection = styled.div`\n position: relative;\n padding: 8px 20px 0;\n margin: 0 -20px;\n min-height: 48px;\n ${({isSticky}) => isSticky ? `\n border-bottom: solid 1px #EEF1F1;\n background: white;\n ` : ''}\n`;\n\nconst ButtonContainer = styled.div`\n position: absolute;\n right: 20px;\n top: 8px;\n`;\n","import React, { useState, useEffect } from 'react';\nimport ReactToPrint from 'react-to-print';\nimport styled from 'styled-components';\nimport { Button, DatePicker, Form } from 'antd';\n\nimport FormItemWrapper, { validate } from '../../../components/FormItemWrapper';\n\nexport default ({printRef, config = {}, onChange}) => {\n const [_date, setDate] = useState();\n\n useEffect(() => {\n setDate(config.date);\n }, [config.date]);\n\n const onSubmit = (event) => {\n event.preventDefault();\n }\n\n const isFormValid = () => {\n const toValidate = [\n {key: 'date', value: _date},\n ];\n return toValidate.map(({key, value}) => validate({\n ...formRules[key],\n value,\n rules: formRules[key] ? (formRules[key].rules || []) : [],\n })).reduce((prev, {validateStatus}) => prev && validateStatus !== 'error', true);\n }\n \n const onChangeDate = (per, isValid) => isValid\n ? onChange({...config, date: per})\n : setDate(per);\n\n return (\n\n \n \n \n \n \n \n (\n Pobierz raport\n )}\n content={() => printRef}\n />\n \n \n \n );\n}\n\nconst formRules = {\n date: {\n label: \"Data powstania raportu\",\n required: true,\n },\n};\n\nconst ReportDowloadForm = styled.div`\n margin-bottom: -16px;\n`;\n\nconst ButtonContainer = styled.div`\n padding: 0 0 0 16px;\n`;\n\nconst TopSelectItem = styled.div`\n display: inline-block;\n vertical-align: middle;\n & + & {\n margin-left: 16px;\n }\n`;\n","import React, { useState, useRef, useContext } from 'react';\nimport styled from 'styled-components';\nimport { StickyContainer, Sticky } from 'react-sticky';\nimport { Empty, message } from 'antd';\n\nimport { AppContext } from '../../../AppDataProvider';\nimport { getReportData } from '../services/api';\n\nimport ReportConfig from './ReportConfig';\nimport ConfirmLoad from './ConfirmLoad';\nimport ReportGeneration from './ReportGeneration';\nimport Section from '../components/Section';\nimport StickySection from '../components/StickySection';\nimport ReportDownload from './ReportDownload';\n\n// Istnieje duże obciążenie przy renderowaniu raportów\n// Możliwe jest odczytanie wartości komentarzy za pomocą DOM np:\n// buildings.reduce((prev, e) => [...prev, document.getElementById(`comment-${e}-dailyHeatConsumption`)], []).map(e => e.getElementsByTagName('textarea')[0].value)\n// Komentarze są zatem bindowane tylko w jedną stronę (przy wgraniu)\n\nexport default () => {\n const [reportConfig, setReportConfig] = useState();\n const [reportData, setReportData] = useState();\n const [reportComments, setReportComments] = useState();\n const [reloadAlert, setReloadAlert] = useState();\n\n const {\n startAsyncTask,\n finishAsyncTask,\n users,\n buildings,\n wrapRequest,\n } = useContext(AppContext);\n\n const printRef = useRef();\n\n const loadData = async () => {\n if(reportData) {\n setReloadAlert(true);\n }\n else {\n _loadData(reportConfig);\n }\n }\n\n const _loadData = async (config) => {\n startAsyncTask(\"Pobieranie danych z raportu może trwać do minuty.\");\n await wrapRequest(() => getReportData(config), {\n onError: () => {\n message.error('Nie udało się wygenerować raportu. Jeśli sytuacja się będzie powtarzać, prośba o kontakt z administracją serwisu.');\n },\n onSuccess: (data) => {\n const groupedData = getGroupedData(data, users, buildings);\n setReportData(groupedData);\n setReportConfig(groupedData.config);\n setReportComments(groupedData.comments);\n setReloadAlert(false);\n },\n }); \n finishAsyncTask();\n }\n\n return (\n \n \n setReportConfig(v)}/>\n \n \n {({style, isSticky}) =>\n (\n
)}\n \n \n {reportData\n ? (\n \n setReportConfig(v)}\n printRef={printRef.current}\n />\n )}\n setReloadAlert(false)}\n onOk={() => _loadData(reportConfig)}\n />\n \n );\n}\n\nconst getGroupedData = ({buildingsUsages, request, ...rest}, users, buildings) => {\n const user = users.find(e => e.id === request.userId);\n const measuredBuildings = buildings.filter(({id, hasMetersInstalled}) => hasMetersInstalled && user.buildingsIds.includes(id)).map(({id}) => id);\n return {\n allBuildings: buildingsUsages,\n measuredBuildings: buildingsUsages.filter(e => measuredBuildings.includes(e.buildingId)),\n request,\n user,\n ...rest,\n }\n}\n\nconst StyledGeneration = styled(StickyContainer)`\n background: #EEF1F1;\n position: relative;\n height: 100%;\n width: 100%;\n overflow: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n @media print {\n color: black;\n }\n`;\n","import Reports from './Reports';\n\nexport default Reports;\n","import React from 'react';\nimport Generation from './scenes/Generation';\n\nexport default () => (\n \n {this.props.children}\n \n );\n }\n}\n\nexport { ReportsContext };\nexport default ReportsDataProvider;\n","import styled from 'styled-components';\n\nexport default styled.div`\n background: #EEF1F1;\n position: relative;\n`;\n","import { round } from 'lodash';\n\nexport const extendAlarms = (alarms, alarmTypes) =>\n alarms.map(alarm => ({\n ...alarm,\n key: alarm.id,\n reading: withUnit(round(alarm.reading, 2), alarm.alarmTypeId),\n threshold: withUnit(alarm.threshold, alarm.alarmTypeId),\n alarmType: alarmTypes.find(alarmType => alarmType.id === alarm.alarmTypeId)\n .name,\n }));\n\nconst withUnit = (value, alarmTypeId) => `${value} ${getUnit(alarmTypeId)}`;\n\nexport const getUnit = alarmTypeId => {\n switch (alarmTypeId) {\n case 1:\n case 2:\n return '°C';\n case 3:\n case 4:\n return 'kW';\n case 5:\n return '%';\n default:\n return '';\n }\n};\n","import React, { useState, useContext, createContext } from 'react';\nimport { message } from 'antd';\n\nimport { AppContext } from '../../AppDataProvider';\nimport { AdministrationContext } from '../Administration/AdministrationDataProvider';\n\nimport {\n getActiveAlarms,\n getAlarmsHistory,\n postAlarmDeactivation,\n postNewAlarmSetting,\n} from './services/api';\nimport { extendAlarms } from './services/const';\n\nconst AlarmsContext = createContext({});\n\nconst AdministrationDataProvider = ({ children }) => {\n const { startAsyncTask, finishAsyncTask, enums, wrapRequest } = useContext(\n AppContext,\n );\n const { fetchBuildings } = useContext(AdministrationContext);\n\n const [activeAlarms, setActiveAlarms] = useState([]);\n const [alarmsHistory, setAlarmsHistory] = useState([]);\n\n async function fetchActiveAlarms() {\n startAsyncTask();\n await wrapRequest(() => getActiveAlarms(), {\n onSuccess: data => {\n setActiveAlarms(extendAlarms(data, enums.alarmTypes));\n },\n });\n finishAsyncTask();\n }\n\n async function fetchAlarmsHistory() {\n startAsyncTask();\n await wrapRequest(() => getAlarmsHistory(), {\n onSuccess: data => {\n setAlarmsHistory(extendAlarms(data, enums.alarmTypes));\n },\n });\n finishAsyncTask();\n }\n\n async function changeSetting(setting) {\n startAsyncTask();\n await wrapRequest(() => postNewAlarmSetting(setting), {\n onError: (error = {}) => {\n message.error(\n error.data ||\n 'Nie udało się zaktualizować ustawień alarmów. Jeśli sytuacja się będzie powtarzać, prośba o kontakt z administracją serwisu.',\n );\n },\n onSuccess: fetchBuildings,\n });\n finishAsyncTask();\n }\n\n async function deactivateAlarm(alarmId) {\n startAsyncTask();\n await wrapRequest(() => postAlarmDeactivation(alarmId), {\n onError: (error = {}) => {\n message.error(\n error.data ||\n 'Nie udało się wyłączyć alarmu. Jeśli sytuacja się będzie powtarzać, prośba o kontakt z administracją serwisu.',\n );\n },\n onSuccess: () => {\n fetchActiveAlarms();\n fetchAlarmsHistory();\n },\n });\n finishAsyncTask();\n }\n\n const state = {\n activeAlarms,\n alarmsHistory,\n\n fetchActiveAlarms,\n fetchAlarmsHistory,\n changeSetting,\n deactivateAlarm,\n };\n\n return (\n {children} \n );\n};\n\nexport { AlarmsContext };\nexport default AdministrationDataProvider;\n","import React, { useContext } from 'react';\nimport { Table, Button } from 'antd';\nimport { format } from 'date-fns';\n\nimport { AppContext } from '../../../AppDataProvider';\n\nconst formatDate = date => format(date, 'HH:mm DD/MM/YYYY ');\n\nconst historyColumns = [\n {\n title: 'Data wyłączenia',\n dataIndex: 'deactivationTime',\n render: date => formatDate(date),\n },\n];\n\nconst AlarmsTable = ({ alarms, deactivateAlarm, isAdmin, isHistory }) => {\n const { buildings, users } = useContext(AppContext);\n\n const baseColumns = [\n {\n title: 'Budynek',\n dataIndex: 'buildingFullName',\n filters: buildings.map(building => ({\n text: building.fullName,\n value: building.fullName,\n })),\n onFilter: (value, record) => record.buildingFullName === value,\n },\n {\n title: 'Data, godzina',\n dataIndex: 'activationTime',\n defaultSortOrder: 'descend',\n sorter: (a, b, sortOrder) =>\n new Date(a.activationTime).getTime() -\n new Date(b.activationTime).getTime(),\n sortDirections: ['descend', 'ascend'],\n render: date => formatDate(date),\n },\n {\n title: 'Rodzaj alarmu',\n dataIndex: 'alarmType',\n },\n {\n title: 'Wskazanie',\n dataIndex: 'reading',\n },\n {\n title: 'Próg',\n dataIndex: 'threshold',\n },\n ];\n\n const columnsWithUsers = [\n {\n title: 'Użytkownik',\n dataIndex: 'userName',\n filters: users.map(user => ({\n text: user.name,\n value: user.name,\n })),\n onFilter: (value, record) => record.userName === value,\n },\n ...baseColumns,\n ];\n\n const activeAlarmsColumns = [\n {\n title: 'Akcja',\n dataIndex: 'id',\n render: id => (\n deactivateAlarm(id)}>\n Akceptuj\n \n ),\n },\n ];\n\n const initial = isAdmin ? columnsWithUsers : baseColumns;\n const columns = isHistory\n ? [...initial, ...historyColumns]\n : [...initial, ...activeAlarmsColumns];\n return (\n \n {user.name}\n \n ));\n const buildingOptions = selectedUserId\n ? buildings\n .filter(building => building.userId === selectedUserId)\n .map(building => (\n \n {building.shortName}\n \n ))\n : null;\n\n const selectedBuilding = buildings.find(\n building => building.id === selectedBuildingId,\n );\n\n return (\n \n
\n \n {userOptions}\n \n {selectedUserId && (\n \n {buildingOptions}\n \n )}\n
\n
\n {selectedBuildingId && (\n
\n
\n {settings.map(setting => (\n \n | \n {alarmTypes.find(type => type.id === setting.alarmTypeId).name}\n | \n
\n ))}\n
\n );\n};\n\nconst Table = ({ children, ...props }) => (\n \n);\n\nconst Row = props => \n | \n {getUnit(setting.alarmTypeId)} | \n \n | \n \n );\n};\n\nexport default AlarmsSettings;\n","import React, { useContext, useEffect } from 'react';\nimport { Tabs } from 'antd';\n\nimport ContentWrapper from '../../../components/ContentWrapper';\nimport { AlarmsContext } from '../AlarmsDataProvider';\nimport AlarmsTable from '../components/AlarmsTable';\nimport AlarmsSettings from './AlarmsSettings';\n\nconst AdminAlarms = () => {\n const {\n activeAlarms,\n alarmsHistory,\n\n fetchActiveAlarms,\n fetchAlarmsHistory,\n changeSetting,\n deactivateAlarm,\n } = useContext(AlarmsContext);\n\n useEffect(() => {\n fetchActiveAlarms();\n fetchAlarmsHistory();\n }, []);\n\n return (\n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default AdminAlarms;\n","import React, { useContext, useEffect } from 'react';\nimport { Tabs } from 'antd';\n\nimport ContentWrapper from '../../../components/ContentWrapper';\nimport { AlarmsContext } from '../AlarmsDataProvider';\nimport AlarmsTable from '../components/AlarmsTable';\n\nconst UserAlarms = () => {\n const {\n activeAlarms,\n alarmsHistory,\n fetchActiveAlarms,\n fetchAlarmsHistory,\n deactivateAlarm,\n } = useContext(AlarmsContext);\n\n useEffect(() => {\n fetchActiveAlarms();\n fetchAlarmsHistory();\n }, []);\n\n return (\n \n \n \n \n \n \n \n \n );\n};\n\nexport default UserAlarms;\n","import Alarms from './Alarms';\n\nexport default Alarms;\n","import React, { useContext } from 'react';\n\nimport { AppContext } from '../../AppDataProvider';\n\nimport AdminAlarms from './scenes/AdminAlarms';\nimport UserAlarms from './scenes/UserAlarms';\n\nconst Alarms = () => {\n const { isAdmin } = useContext(AppContext);\n\n return isAdmin ? {children} ;\n};\n\nexport { DbContext };\nexport default DbDataProvider;\n","import React, { useContext } from 'react';\n\nimport CrudList from '../../../../components/CRUDs/CrudList';\nimport { DbContext } from '../../DbDataProvider';\n\nconst BuildingsList = () => {\n const {\n setCurrentId,\n buildings,\n setMode,\n setKind,\n setIsModalVisible,\n } = useContext(DbContext);\n\n const showBuildingsModal = id => {\n setIsModalVisible(true);\n setCurrentId(id);\n setKind('Buildings');\n };\n\n const handleReadBuilding = id => {\n showBuildingsModal(id);\n setMode('read');\n };\n\n const handleUpdateBuilding = id => {\n showBuildingsModal(id);\n setMode('update');\n };\n\n return (\n ({\n name: building.fullName,\n description: `${building.street}, ${building.city}`,\n id: building.id,\n }))}\n onRead={handleReadBuilding}\n onUpdate={handleUpdateBuilding}\n />\n );\n};\n\nexport default BuildingsList;\n","import React, { useContext, useState } from 'react';\nimport { Select } from 'antd';\n\nimport { AppContext } from '../../../../AppDataProvider';\nimport CrudList from '../../../../components/CRUDs/CrudList';\nimport { DbContext } from '../../DbDataProvider';\n\nconst { Option } = Select;\n\nconst HookUpsList = () => {\n const {\n hookUps,\n setCurrentId,\n setMode,\n setKind,\n setIsModalVisible,\n } = useContext(DbContext);\n\n const { buildings, enums } = useContext(AppContext);\n\n const showHookUpsModal = id => {\n setIsModalVisible(true);\n setCurrentId(id);\n setKind('HookUps');\n };\n\n const handleCreateHookUp = () => {\n showHookUpsModal();\n setMode('create');\n };\n\n const handleReadHookUp = id => {\n showHookUpsModal(id);\n setMode('read');\n };\n\n const handleUpdateHookUp = id => {\n showHookUpsModal(id);\n setMode('update');\n };\n\n const handleDeleteHookUp = id => {\n showHookUpsModal(id);\n setMode('delete');\n };\n\n const [selectedBuildingId, setSelectedBuildingId] = useState();\n const handleBuildingChange = value => setSelectedBuildingId(value);\n const buildingOptions = buildings.map(building => (\n \n {building.shortName}\n \n ));\n\n const filteredHookUps = hookUps\n .filter(hookUp => hookUp.buildingId === selectedBuildingId)\n .map(hookUp => ({\n name: hookUp.name,\n description: `${enums.hookUpTypes[hookUp.type - 1].name}, nr ${hookUp.number}`,\n id: hookUp.id,\n }));\n\n return (\n <>\n \n {buildingOptions}\n \n {selectedBuildingId && (\n \n {building.shortName}\n \n ));\n\n const [selectedHookUpId, setSelectedHookUpId] = useState();\n const handleHookUpChange = value => setSelectedHookUpId(value);\n const hookUpsgOptions = hookUps\n .filter(hookUp => hookUp.buildingId === selectedBuildingId)\n .map(hookUp => (\n \n {`${hookUp.name}, ${enums.hookUpTypes[hookUp.type - 1].name}`}\n \n ));\n\n const filteredInvoices = invoices\n .filter(invoice => invoice.hookUpId === selectedHookUpId)\n .map(invoice => ({\n name: `Faktura ${moment(invoice.month).format(\n 'MM-YYYY',\n )}${getHookUpDetails(invoice.hookUpId, hookUps, buildings)}`,\n description: `Zużycie ${invoice.monthlyUsage} ${getHookUpUnit(\n invoice.hookUpId,\n hookUps,\n )}`,\n id: invoice.id,\n }));\n\n return (\n <>\n \n {buildingOptions}\n \n {selectedBuildingId && (\n \n {hookUpsgOptions}\n \n )}\n {selectedHookUpId && (\n {building.shortName} \n ));\n\n const buildingFieldOptions = BUILDING_FIELDS.map(entry => (\n {entry.label} \n ));\n\n const invoiceOptions = enums.hookUpTypes.map(hookUpType => (\n {hookUpType.name} \n ));\n\n const [startDate, setStartDate] = useState();\n const [endDate, setEndDate] = useState();\n const handleStartMonthSelect = value => setStartDate(value);\n const handleEndMonthSelect = value => setEndDate(value);\n const disabledStartDate = newStartDate => {\n if (!newStartDate || !endDate) {\n return false;\n }\n return newStartDate.valueOf() > endDate.valueOf();\n };\n const disabledEndDate = newEndDate => {\n if (!newEndDate || !startDate) {\n return false;\n }\n return newEndDate.valueOf() <= startDate.valueOf();\n };\n\n const isFormValid = buildingsIds.length > 0 && startDate && endDate;\n\n const handleExport = async () => {\n const request = {\n buildingsIds,\n buildingsFields,\n hookUpTypesIds,\n startDate: startDate.toISOString(),\n endDate: endDate.toISOString(),\n }\n const response = await axios.post('/DataExport/export', request, { responseType: 'blob' });\n saveAs(response.data, `Eksport danych.xlsx`);\n };\n\n return (\n \n );\n};\n\nexport default DataExport;\n","import React, { useState, useContext } from 'react';\nimport styled from 'styled-components';\nimport { Button, Tabs } from 'antd';\n\nimport CheckboxField from '../../../../components/CRUDs/CheckboxField';\nimport NumberField from '../../../../components/CRUDs/NumberField';\nimport SelectField from '../../../../components/CRUDs/SelectField';\nimport TextField from '../../../../components/CRUDs/TextField';\n\nimport { AppContext } from '../../../../AppDataProvider';\nimport { AdministrationContext } from '../../../Administration/AdministrationDataProvider';\n\nconst { TabPane } = Tabs;\n\nconst TabWrapper = styled.div`\n height: 500px;\n overflow-y: scroll;\n padding-right: 16px;\n position: relative;\n`;\n\nconst BuildingForm = ({\n editable,\n initialState,\n actionLabel,\n onCancel,\n onAction,\n removeMode = false,\n}) => {\n const data = initialState || {\n // Admin\n fullName: '',\n shortName: '',\n street: '',\n city: '',\n postalCode: '',\n postOffice: '',\n hasMetersInstalled: true,\n category: 1,\n userId: 0,\n // User\n yearOfConstruction: 0,\n modernisationDescription: '',\n hasThermostaticValves: true,\n cubature: 0,\n mainElectricityHookUpPower: 0,\n mainHeatHookUpPower: 0,\n coolingType: undefined,\n lightingType: undefined,\n ventilationType: undefined,\n heatingSourceType: undefined,\n heatingEnergyCarrierType: undefined,\n renewableEnergySourceType: undefined,\n domesticHotWaterSourceType: undefined,\n };\n\n const { enums } = useContext(AppContext);\n const { users } = useContext(AdministrationContext);\n\n const [formData, setFormData] = useState(data);\n\n const onChange = (fieldName, e) => {\n setFormData({\n ...formData,\n [fieldName]: e.target.value,\n });\n };\n\n const handleAction = () => {\n onAction(formData);\n onCancel();\n };\n\n const adminProps = { editable: false, formData };\n\n const handleValvesCheck = e =>\n setFormData({\n ...formData,\n hasThermostaticValves: e.target.checked,\n });\n\n const onSelect = (fieldName, value) => {\n setFormData({\n ...formData,\n [fieldName]: value,\n });\n };\n\n const userProps = { editable, onChange: onSelect, formData };\n const textProps = { editable, onChange, formData };\n\n return (\n \n {removeMode ? (\n
Czy na pewno chcesz usunąć budynek?
\n ) : (\n
\n \n \n \n Budynek opomiarowany\n \n \n \n \n \n \n Posiada zawory termostatyczne\n \n onSelect('coolingType', v)}\n disabled={!editable}\n value={formData.coolingType}\n items={enums.coolingTypes}\n />\n onSelect('lightingType', v)}\n disabled={!editable}\n value={formData.lightingType}\n items={enums.lightingTypes}\n />\n onSelect('ventilationType', v)}\n disabled={!editable}\n value={formData.ventilationType}\n items={enums.ventilationTypes}\n />\n onSelect('heatingSourceType', v)}\n disabled={!editable}\n value={formData.heatingSourceType}\n items={enums.heatingSourceTypes}\n />\n onSelect('heatingEnergyCarrierType', v)}\n disabled={!editable}\n value={formData.heatingEnergyCarrierType}\n items={enums.heatingEnergyCarrierTypes}\n />\n onSelect('renewableEnergySourceType', v)}\n disabled={!editable}\n value={formData.renewableEnergySourceType}\n items={enums.renewableEnergySourceTypes}\n />\n onSelect('domesticHotWaterSourceType', v)}\n disabled={!editable}\n value={formData.domesticHotWaterSourceType}\n items={enums.domesticHotWaterSourceTypes}\n />\n \n \n \n )}\n
\n Anuluj \n \n {actionLabel}\n \n \n {removeMode ? (\n
Czy na pewno chcesz usunąć przyłącze ?
\n ) : (\n <>\n
\n
\n
\n
\n
onChangeValue('type', v)}\n disabled={!editable}\n value={formData.type}\n items={enums.hookUpTypes}\n />\n onChangeValue('buildingId', v)}\n disabled={!editable}\n value={formData.buildingId}\n items={buildings}\n itemKey=\"fullName\"\n />\n \n )}\n \n Anuluj \n \n {actionLabel}\n \n \n {removeMode ? (\n
Czy na pewno chcesz usunąć fakturę ?
\n ) : (\n <>\n
\n onChange('month', v)}\n placeholder=\"Wybierz miesiąc\"\n />\n \n
\n `${value} ${getHookUpUnit(formData.hookUpId, hookUps)}`\n }\n />\n onChange('hookUpId', v)}\n disabled={!editable}\n value={formData.hookUpId}\n items={hookUps}\n />\n \n )}\n \n Anuluj \n \n {actionLabel}\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n};\n\nexport default Db;\n","// Converts a #ffffff hex string into an [r,g,b] array\nfunction hex2rgb(hex) {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? [\n parseInt(result[1], 16),\n parseInt(result[2], 16),\n parseInt(result[3], 16),\n ]\n : null;\n}\n\nfunction rgb2hsl(color) {\n const r = color[0] / 255;\n const g = color[1] / 255;\n const b = color[2] / 255;\n\n const max = Math.max(r, g, b);\n\n const min = Math.min(r, g, b);\n let h;\n\n let s;\n\n const l = (max + min) / 2;\n\n if (max === min) {\n s = 0;\n h = 0; // achromatic\n } else {\n const d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n default:\n break;\n }\n h /= 6;\n }\n\n return [h, s, l];\n}\n\nfunction interpolateHSL(color1, color2, factor) {\n const hsl1 = rgb2hsl(hex2rgb(color1));\n const hsl2 = rgb2hsl(hex2rgb(color2));\n for (let i = 0; i < 3; i++) {\n hsl1[i] += factor * (hsl2[i] - hsl1[i]);\n }\n return `hsl(${hsl1[0] * 360},${hsl1[1] * 100}%,${hsl1[2] * 100}%)`;\n}\n\nexport default interpolateHSL;\n","import React, { useRef, useEffect } from 'react';\nimport styled from 'styled-components';\n\nimport interpolateHSL from './colorInterpolation';\nimport MathParser from '../../../../components/MathParser';\nimport { formatNumber } from '../../../../utils/formaters';\n\nconst Gauge = ({\n title,\n // Values\n value = 60,\n minValue = 0,\n maxValue = 100,\n // Styling\n startColor = '#33CC33',\n endColor = '#FF471A',\n segmentColors,\n segmentsCount = 10,\n // Sizing\n innerRadius = 90,\n outerRadius = 180,\n // Needle\n needleClassname = '',\n}) => {\n const canvasRef = useRef();\n useEffect(() => {\n const ctx = canvasRef.current.getContext('2d');\n drawGauge(ctx, segmentsCount, startColor, endColor);\n }, []);\n\n const needleAngle = 180 * (value / maxValue) - 90;\n const normalizedNeedleAngle = (maxValue <= 0) ? 0 : parseInt(\n Math.max(-90, Math.min(needleAngle, 90)),\n 10,\n );\n\n const normalizedFactor = Math.min(1, value / maxValue);\n const valueColor = interpolateHSL(startColor, endColor, normalizedFactor);\n\n return (\n \n {formatNumber(minValue, {position: -1})} \n \n
{formatNumber(maxValue / 2, {position: -1})} \n
\n
\n
{formatNumber(value, {position: -1})} \n {title &&
<MathParser>{title}</MathParser> }\n
{formatNumber(maxValue, {position: -1})} \n \n );\n\n function drawSegment(ctx, segmentNo, arcAngle, color) {\n const startAngle = segmentNo * arcAngle;\n const endAngle = (segmentNo + 1) * arcAngle;\n const ringWidth = outerRadius - innerRadius;\n\n ctx.beginPath();\n ctx.arc(\n outerRadius,\n outerRadius,\n outerRadius,\n Math.PI + startAngle,\n Math.PI + endAngle,\n ); // outer\n const { x, y } = getLineCords(innerRadius, endAngle);\n ctx.lineTo(ringWidth + x, outerRadius - y);\n ctx.arc(\n outerRadius,\n outerRadius,\n innerRadius,\n -(Math.PI - endAngle),\n -(Math.PI - startAngle),\n true,\n ); // inner\n const { x: endX, y: endY } = getLineCords(outerRadius, startAngle);\n ctx.lineTo(endX, outerRadius - endY);\n ctx.closePath();\n\n ctx.strokeStyle = 'white';\n // ctx.lineWidth = 3;\n // ctx.stroke();\n ctx.fillStyle = color;\n ctx.fill();\n\n function getLineCords(r, alfa) {\n return {\n x: r - r * Math.cos(alfa),\n y: r * Math.sin(alfa),\n };\n }\n }\n\n function drawGauge(ctx, segmentsCount, startColor, endColor) {\n const colors = getColors(startColor, endColor, segmentsCount);\n const arcAngle = Math.PI / segmentsCount;\n [...Array(segmentsCount).keys()].map(num =>\n drawSegment(ctx, num, arcAngle, colors[num]),\n );\n }\n\n function getColors(startColor, endColor, segmentsCount) {\n return (\n segmentColors ||\n [...Array(segmentsCount).keys()]\n .map(num => num / segmentsCount)\n .map(factor => interpolateHSL(startColor, endColor, factor))\n );\n }\n};\n\nconst Title = styled.div`\n font-size: 16px;\n font-weight: bold;\n text-align: center;\n`;\nconst Container = styled.div`\n display: flex;\n align-items: flex-end;\n font-size: 20px;\n font-weight: bold;\n`;\n\nconst TopLabel = styled.div`\n width: 100%;\n text-align: center;\n`;\n\nconst RightLabel = styled.div`\n font-weight: bold;\n margin-left: 10px;\n margin-bottom: 66px;\n`;\n\nconst LeftLabel = styled.div`\n margin-right: 10px;\n margin-bottom: 66px;\n`;\n\nconst ValueLabel = styled.div`\n width: 100%;\n text-align: center;\n font-size: 30px;\n color: ${p => p.color};\n`;\n\nconst Needle = styled.div`\n height: ${p => p.outerRadius * 0.85}px;\n width: 10px;\n position: absolute;\n left: ${p => p.outerRadius}px;\n top: ${p => p.outerRadius}px;\n background: #333;\n transform: translate(-50%, -100%) rotate(${p => p.angle}deg);\n transform-origin: 50% 100%;\n clip-path: polygon(50% 0, 80% 20%, 100% 100%, 0 100%);\n border-radius: 0 0 15px 15px;\n`;\n\nexport default Gauge;\n","import { formatNumber } from '../../../../utils/formaters';\nimport { CHART_TYPES } from '../../../../components/CustomChart';\n\nconst getConfig = ({ barColor, unit, dataFieldName, avgValue, title }) => ({\n chartConfig: {\n settings: {\n stopAnimation: false,\n stopInteractive: false,\n title: '',\n showTitle: false,\n showLegend: false,\n horizontalGrid: false,\n verticalGrid: false,\n xFormatter: e => e,\n yFormatter: e => formatNumber(e, { position: -1 }),\n },\n limits: [\n {\n description: '',\n axis: '0',\n lineWidth: 2,\n lineColor: 'black',\n dashLength: 10,\n dashSpacing: 15,\n value: avgValue,\n },\n ],\n xAxis: {\n xKey: 'name',\n description: '',\n showDescription: false,\n color: '#333',\n datesNumber: 3,\n withTime: false,\n useDefault: true,\n minTickGap: 15,\n interval: 'preserveStart',\n },\n yAxises: [\n {\n id: '0',\n color: '#333',\n showAxis: true,\n side: 'left',\n description: '',\n showDescription: false,\n unit: '',\n rangeFrom: '0',\n rangeTo: 'auto',\n rangeSpan: 'auto',\n },\n ],\n },\n chartType: CHART_TYPES.BAR_CHART,\n usedData: [\n {\n id: '0', // Po co to ?\n description: 'Zużycie',\n dataSource: 'usage',\n axis: '0',\n showRegresion: false,\n dotted: false,\n lineWidth: 2,\n lineColor: barColor,\n dashed: false,\n dashLength: 5,\n dashSpacing: 5,\n unit,\n },\n ],\n title,\n dataFieldName,\n});\n\nexport const preventNaN = v =>\n Number.isNaN(v) || v === 'NaN' || v === null || v === undefined ? 0 : v;\n\nexport const getMyBuildingsChartsConfig = ({\n avgElectricityUsage,\n avgHeatUsage,\n avgEnergyUsage,\n avgWaterUsage,\n}) =>\n [\n {\n barColor: '#10C8CA',\n dataFieldName: 'electricityUsagesPerSqMeter',\n unit: 'kWh/m^2*rok',\n title: 'Zużycie energii elektrycznej [kWh/m^2]',\n avgValue: preventNaN(avgElectricityUsage),\n },\n {\n barColor: '#4462ba',\n dataFieldName: 'heatUsagesPerSqMeter',\n unit: 'kWh/m^2*rok',\n title: 'Zużycie ciepła [kWh/m^2]',\n avgValue: preventNaN(avgHeatUsage),\n },\n {\n barColor: '#7FD2BE',\n dataFieldName: 'energyUsagesPerSqMeter',\n unit: 'kWh/m^2*rok',\n title: 'Zużycie energii [kWh/m^2]',\n avgValue: preventNaN(avgEnergyUsage),\n },\n {\n barColor: '#2490be',\n dataFieldName: 'waterUsagesPerSqMeter',\n unit: 'm^3/m^2*rok',\n title: 'Zużycie wody [m^3/m^2]',\n avgValue: preventNaN(avgWaterUsage),\n },\n ].map(getConfig);\n","import axios from 'axios';\nimport { preventNaN } from '../scenes/MyBuildings/chartConfig';\n\nexport const getMyBuildingsBenchmark = async buildings => {\n const resp = await axios.get('/Benchmarking/usages');\n return {\n ...resp,\n data: parseBackendChartData(resp.data, buildings),\n }\n};\n\nconst parseBackendChartData = (backendData, buildings) => ({\n avgElectricityUsage: preventNaN(backendData.avgElectricityUsage),\n avgEnergyUsage: preventNaN(backendData.avgEnergyUsage),\n avgHeatUsage: preventNaN(backendData.avgHeatUsage),\n avgWaterUsage: preventNaN(backendData.avgWaterUsage),\n electricityUsagesPerSqMeter: getBuildingsNames(\n backendData.electricityUsagesPerSqMeter,\n buildings,\n ),\n heatUsagesPerSqMeter: getBuildingsNames(\n backendData.heatUsagesPerSqMeter,\n buildings,\n ),\n energyUsagesPerSqMeter: getBuildingsNames(\n backendData.energyUsagesPerSqMeter,\n buildings,\n ),\n waterUsagesPerSqMeter: getBuildingsNames(\n backendData.waterUsagesPerSqMeter,\n buildings,\n ),\n});\n\nconst getBuildingsNames = (usages, buildings) => {\n return usages.map(usage => {\n const building = buildings.find(b => b.id === usage.buildingId);\n return {\n name: building ? building.shortName : '',\n usage: preventNaN(usage.usage),\n };\n });\n};\n\n\nexport const getDatabaseBenchmark = async ({\n buildingId,\n compareOnlyWithinSameCategory,\n}) => {\n const resp = await axios.put('/Benchmarking/comparison', {buildingId, compareOnlyWithinSameCategory});\n return {\n ...resp,\n data: parseBackendGaugesData(resp.data),\n }\n};\n\nconst parseBackendGaugesData = backendData => [\n {\n title: 'Jednostkowe zużycie ciepła [kWh/m^2]',\n value: preventNaN(backendData.chosenBuildingHeatUsagePerSqMeter),\n avg: preventNaN(backendData.avgHeatUsage),\n },\n {\n title: 'Jednostkowe zużycie energii elektrycznej [kWh/m^2]',\n value: preventNaN(backendData.chosenBuildingElectricityUsagePerSqMeter),\n avg: preventNaN(backendData.avgElectricityUsage),\n },\n {\n title: 'Jednostkowe zużycie energii [kWh/m^2]',\n value: preventNaN(backendData.chosenBuildingEnergyUsagePerSqMeter),\n avg: preventNaN(backendData.avgEnergyUsage),\n },\n {\n title: 'Jednostkowe zużycie wody [m^3/m^2]',\n value: preventNaN(backendData.chosenBuildingWaterUsagePerSqMeter),\n avg: preventNaN(backendData.avgWaterUsage),\n },\n];\n","import React, { useState, useContext } from 'react';\n\nimport { getMyBuildingsBenchmark, getDatabaseBenchmark } from './services/api';\n\nimport { AppContext } from '../../AppDataProvider';\n\nconst BenchmarkingContext = React.createContext({});\n\nconst BenchmarkingDataProvider = ({ children }) => {\n const { startAsyncTask, finishAsyncTask, buildings, wrapRequest } = useContext(AppContext);\n\n const [myBuildingsBenchmark, setMyBuildingsBenchmark] = useState();\n const [databaseBenchmark, setDatabaseBenchmark] = useState();\n\n async function fetchMyBuildingsBenchmark() {\n startAsyncTask(\"Porównywanie wszystkich posiadanych budynków może zająć dużo czasu.\");\n await wrapRequest(() => getMyBuildingsBenchmark(buildings),\n {\n onSuccess: (data) => {\n setMyBuildingsBenchmark(data);\n },\n });\n finishAsyncTask();\n }\n\n async function fetchDatabaseBenchmark(params) {\n startAsyncTask(\"Porównywanie wszystkich budynków może zająć dużo czasu.\");\n await wrapRequest(() => getDatabaseBenchmark(params),\n {\n onSuccess: (data) => {\n setDatabaseBenchmark(data);\n },\n });\n finishAsyncTask();\n }\n\n const state = {\n fetchMyBuildingsBenchmark,\n fetchDatabaseBenchmark,\n\n myBuildingsBenchmark,\n databaseBenchmark,\n };\n\n return (\n \n {children}\n \n );\n};\n\nexport { BenchmarkingContext };\nexport default BenchmarkingDataProvider;\n","import React, { useContext, useState, useEffect } from 'react';\nimport styled from 'styled-components';\nimport {isNil} from 'lodash';\nimport { Select, Radio, Alert } from 'antd';\n\nimport Gauge from './Gauge';\nimport { AppContext } from '../../../../AppDataProvider';\nimport { AdministrationContext } from '../../../Administration/AdministrationDataProvider';\nimport { BenchmarkingContext } from '../../BenchmarkingDataProvider';\n\nconst GaugesContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n`;\n\nconst GaugeWrapper = styled.div`\n margin-right: 80px;\n margin-left: 80px;\n margin-top: 20px;\n @media (max-width: 1440px) {\n margin-right: 40px;\n margin-left: 40px;\n margin-top: 10px;\n }\n @media (max-width: 1366px) {\n margin-right: 20px;\n margin-left: 20px;\n margin-top: 10px;\n }\n`;\n\nconst Database = () => {\n const { enums } = useContext(AppContext);\n const { buildings, fetchBuildings } = useContext(AdministrationContext);\n const { databaseBenchmark, fetchDatabaseBenchmark } = useContext(\n BenchmarkingContext,\n );\n\n const [selectedBuildingId, setSelectedBuildingId] = useState();\n const [benchmarkType, setBenchmarkType] = useState('database');\n\n useEffect(function getBuildings() {\n fetchBuildings();\n }, []);\n useEffect(() => {\n const params = {\n buildingId: selectedBuildingId,\n compareOnlyWithinSameCategory:\n benchmarkType === 'category',\n };\n if(!isNil(selectedBuildingId)){\n fetchDatabaseBenchmark(params);\n }\n }, [selectedBuildingId, benchmarkType]);\n\n const buildingsOptions = buildings.map(building => (\n \n {building.shortName}\n \n ));\n\n const selectedBuilding = buildings.find(\n building => building.id === selectedBuildingId,\n );\n const buildingCategory = selectedBuilding\n ? enums.buildingTypes.find(\n buildingType => buildingType.id === selectedBuilding.category,\n )\n : null;\n\n const handleBuildingSelect = id => setSelectedBuildingId(id);\n const handleBenchmarkTypeCheck = event =>\n setBenchmarkType(event.target.value);\n\n return (\n \n
\n
\n {buildingsOptions}\n \n {selectedBuilding && (\n <>\n \n {selectedBuilding && databaseBenchmark &&
}\n
\n {data.map(({ value, title, avg }) => (\n \n \n ))}\n \n );\n};\n\nconst BenchmarkRadio = ({\n handleBenchmarkTypeCheck,\n benchmarkType,\n buildingCategory,\n}) => {\n return (\n \n
Porównaj w:
\n
\n Całej bazie \n {`Kategorii \"${buildingCategory.name}\"`} \n \n
\n \n \n \n {chartConfigs.map(cfg => (\n \n \n \n );\n};\n\nconst Container = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n`;\n\nconst AlertWrapper = styled.div`\n position: absolute;\n top: -56px;\n right: 24px;\n`;\n\nconst Cell = ({ children, loading, title, spread, hide }) => (\n \n \n {children}\n \n \n);\n\nconst StyledCell = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport default MyBuildings;\n","import React from 'react';\nimport { Tabs } from 'antd';\n\nimport ContentWrapper from '../../components/ContentWrapper';\nimport Database from './scenes/Database';\nimport MyBuildings from './scenes/MyBuildings';\n\nconst Benchmarking = () => {\n return (\n \n \n \n \n \n \n \n \n );\n};\n\nexport default Benchmarking;\n","/* eslint-disable camelcase */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { LocaleProvider } from 'antd';\nimport pl_PL from 'antd/lib/locale-provider/pl_PL';\nimport moment from 'moment';\nimport 'moment/locale/pl';\nimport { Route, Switch, Redirect } from 'react-router';\n\nimport { minAppHeight, minAppWidth, scrollWidth } from './constants';\n\nimport './overrides.css';\n\nimport {\n AdministrationRoute,\n AlarmsRoute,\n DashboardRoute,\n DataAnalyticsRoute,\n SignInRoute,\n ReportsRoute,\n DbRoute,\n BenchmarkingRoute,\n HelpRoute,\n} from './Routes';\n\nimport CookiesInfo from './components/CookiesInfo';\nimport Error from './components/Error';\nimport Layout from './components/Layout';\nimport Authentication from './components/Authentication';\nimport MainLoading from './components/MainLoading';\nimport AppDataProvider from './AppDataProvider';\n\nimport SignIn from './scenes/SignIn/SignIn';\nimport Administration from './scenes/Administration';\nimport AdministrationDataProvider from './scenes/Administration/AdministrationDataProvider';\nimport Analysis from './scenes/Analysis';\nimport AnalysisDataProvider from './scenes/Analysis/AnalysisDataProvider';\nimport Dashboard from './scenes/Dashboard';\nimport DashboardDataProvider from './scenes/Dashboard/DashboardDataProvider';\nimport Reports from './scenes/Reports';\nimport ReportsDataProvider from './scenes/Reports/ReportsDataProvider';\n\nimport Alarms from './scenes/Alarms';\nimport AlarmsDataProvider from './scenes/Alarms/AlarmsDataProvider';\n\nimport Db from './scenes/Db';\nimport DbDataProvider from './scenes/Db/DbDataProvider';\n\nimport Benchmarking from './scenes/Benchmarking';\nimport BenchmarkingDataProvider from './scenes/Benchmarking/BenchmarkingDataProvider';\n\nimport Help from './scenes/Help';\n\nmoment.locale('pl');\n\nconst App = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nconst StyledApp = styled.div`\n min-width: ${minAppWidth - scrollWidth}px;\n min-height: ${minAppHeight}px;\n height: 100%;\n`;\n\nexport default App;\n","export const minAppWidth = 1280;\nexport const scrollWidth = 22;\nexport const minAppHeight = 720;\nexport const navWidth = 167;\nexport const topBarHeight = 56;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { BrowserRouter as Router } from 'react-router-dom';\nimport axios from 'axios';\nimport { createGlobalStyle } from 'styled-components';\nimport reset from 'styled-reset';\n\nimport 'antd/dist/antd.css';\n\nimport App from './App';\n\naxios.defaults.baseURL = process.env.REACT_APP_API_BASE;\n\n// console.log(process.env.REACT_APP_API_BASE, 'base');\nconst token = localStorage.getItem('user-token');\nif (token) {\n axios.defaults.headers.common.Authorization = `Bearer ${token}`;\n}\n\nconst GlobalStyle = createGlobalStyle`\n ${reset}\n`;\n\nconst mainApp = (\n \n \n \n \n);\n\nReactDOM.render(mainApp, document.getElementById('root'));\n"],"sourceRoot":""}