Categories
discuss

How clear focus for BasicTextField in Jetpack Compose?

I have a Jetpack Compose (Beta04) BasicTextField (with decorationBox). How can I clear the focus?

I have tried with focusRequester but this doesn’t works:

val focusRequester = remember { FocusRequester() }

// ...

BasicTextField(modifier = Modifier.focusRequester(focusRequester), /* ... */)

// ...

placesFocusRequester.freeFocus()

Answer

To clear focus from the currently focused component you can use the FocusManager.clearFocus method:

    val focusRequester = remember { FocusRequester() }
    val focusManager = LocalFocusManager.current
    var value by rememberSaveable { mutableStateOf("initial value") }
    BasicTextField(
        value = value,
        onValueChange = { value = it },
        decorationBox = { innerTextField ->
            Row(
                Modifier
                    .background(Color.LightGray, RoundedCornerShape(percent = 30))
                    .padding(16.dp)
                    .focusRequester(focusRequester)
            ) {
                //...
                innerTextField()
            }
        }
    )
  
    Button(onClick = { focusManager.clearFocus() }) {
        Text("Clear focus")
    }
Categories
discuss

ChartJS – rolling twenty minute view

Code below,

is there a way to get ‘realtime’ with a rolling twenty minute view? can’t seem to find anything in the options that enables this.

ChartJS version 2.9.4

import 'chartjs-plugin-zoom';
import { Line } from 'react-chartjs-2';
import 'chartjs-plugin-streaming';

export default () => {
    const data = {
        datasets: [
            {
                label: 'MWC',
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: 'rgba(255, 99, 132, 0.5)',
                steppedLine: true,
                lineTension: 0,
                borderDash: [8, 4],
                data: new Array(1000).fill(null).map((_, i) => {
                    return {
                        x: new Date(new Date().setTime(new Date().getTime() + (i + 1) * 1000)),
                        y: random(500, 1000),
                    };
                }), // REPLACE THIS WITH REALTIME FEED
            },
        ],
    };

    const options = {
        scales: {
            xAxes: [
                {
                    type: 'realtime',
                    time: {
                        unit: 'minute',
                        displayFormats: {
                            quarter: 'h:mm a',
                        },
                    },
                    realtime: {
                        onRefresh: function(chart: any) {
                            // eslint-disable-next-line functional/immutable-data
                        },
                        delay: 2000,
                    },
                },
            ],
        },
        zoom: {
            enabled: true,
            mode: 'x',
            rangeMin: {
                x: null,
            },
            threshold: 10,
            rangeMax: {
                x: null,
            },
        },
    };
    return (
        <div>
            <Line data={data} options={options} />
        </div>
    );
};

Answer

duration property would help you to restrict view to a specific time limit. It accepts time in millisecods and for 20 minutes view you can configure it like below.

For more details, check plugin Configuration

realtime: {
    onRefresh: function(chart: any) {
            // eslint-disable-next-line functional/immutable-data
    },
    delay: 2000,
    duration: 1200000,
},
Source: stackoverflow
Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. By using this site, you agree to the Privacy Policy, and Copyright Policy. Content is available under CC BY-SA 3.0 unless otherwise noted. The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 © No Copyrights, All Questions are retrived from public domain..